/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

.about-page {
  background: var(--near-black, #0b0b0b);
  color: var(--off-white, #f0efe8);
  overflow-x: hidden;
}


/* ==========================================================================
   MAIN
   ========================================================================== */

.about-main {
  min-height: 100vh;
}

.about-section {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;

  padding:
    clamp(70px, 8vh, 110px)
    clamp(28px, 5vw, 80px)
    clamp(120px, 14vh, 170px);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.about-header {
  width: 100%;
  margin-bottom: clamp(40px, 6vh, 80px);
}

.about-kicker {
  margin: 0 0 18px;

  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--accent, #ff5a1f);
}


/* Exact Resume heading treatment */

.about-page .about-title {
  margin: 0 0 20px;

  font-family: var(--display, "Clash Display", sans-serif);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;

  color: var(--off-white, #f0efe8);
}


/* ==========================================================================
   FACT GENERATOR
   ========================================================================== */

.fact-generator {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.8fr)
    minmax(340px, 1.2fr);

  gap: clamp(36px, 6vw, 100px);

  /*
   * Both columns begin at exactly the same vertical position.
   * This aligns the top of the button with the top of the image.
   */
  align-items: start;

  width: 70%;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.fact-media {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  overflow: hidden;

  background: rgba(240, 239, 232, 0.04);
}

.fact-image {
  display: block;

  width: 100%;
  height: auto;

  aspect-ratio: 4 / 5;
  object-fit: cover;

  transition:
    opacity 220ms ease,
    transform 450ms cubic-bezier(.2, .7, .2, 1);
}

.fact-generator.is-changing .fact-image {
  opacity: 0;
  transform: scale(0.985);
}


/*
 * Fact 08 GIF:
 * preserves the GIF's original aspect ratio and dimensions.
 */

.fact-image.is-gif {
  width: auto;
  max-width: 100%;
  height: auto;

  aspect-ratio: auto;
  object-fit: contain;
}


/* ==========================================================================
   FACT CONTENT
   ========================================================================== */

.fact-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  max-width: 760px;
}


/* ==========================================================================
   BUTTON
   ========================================================================== */

.fact-button {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  min-width: 280px;

  /*
   * No top margin.
   * This keeps the top of the button aligned with the image.
   */
  margin: 0;
  padding: 15px 18px;

  border: 1px solid rgba(240, 239, 232, 0.45);
  border-radius: 0;

  background: transparent;
  color: var(--off-white, #f0efe8);

  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.fact-button:hover {
  background: var(--accent, #ff5a1f);
  border-color: var(--accent, #ff5a1f);
  color: var(--near-black, #0b0b0b);
}

.fact-button:focus-visible {
  outline: 2px solid var(--accent, #ff5a1f);
  outline-offset: 4px;
}


/* ==========================================================================
   CAPTION
   ========================================================================== */

.fact-caption {
  max-width: 660px;

  /*
   * This controls the space between the button and caption.
   */
  margin: clamp(28px, 4vh, 46px) 0 0;

  font-family: var(--display, "Clash Display", sans-serif);

  /*
   * Significantly smaller than the previous caption.
   */
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.015em;

  color: rgba(240, 239, 232, 0.74);

  transition:
    opacity 180ms ease,
    transform 300ms cubic-bezier(.2, .7, .2, 1);
}

.fact-generator.is-changing .fact-caption {
  opacity: 0;
  transform: translateY(8px);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

  .about-section {
    padding-left: 28px;
    padding-right: 28px;
  }

  .fact-generator {
    grid-template-columns:
      minmax(220px, 0.85fr)
      minmax(280px, 1.15fr);

    gap: 36px;
    width: 100%;
  }

  .fact-caption {
    font-size: clamp(17px, 2.2vw, 22px);
    line-height: 1.32;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

  .about-section {
    min-height: auto;

    padding:
      80px
      20px
      120px;
  }

  .about-header {
    margin-bottom: 38px;
  }

  /* Exact Resume mobile heading treatment */

  .about-page .about-title {
    font-size: clamp(28px, 9vw, 46px);
    line-height: 1;
  }

  .fact-generator {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 28px;
    width: 100%;
  }

  .fact-media {
    width: 100%;
  }

  .fact-image {
    width: 100%;
  }

  .fact-image.is-gif {
    width: auto;
    max-width: 100%;
    max-height: 65vh;
    margin: 0 auto;
  }

  .fact-content {
    width: 100%;
    max-width: none;
  }

  .fact-button {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .fact-caption {
    max-width: none;
    margin-top: 26px;

    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.32;
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

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

  .fact-image,
  .fact-caption,
  .fact-button {
    transition: none;
  }
  

}