/* FINAL INLINE FIX — loaded inside index.html so GitHub cannot miss it */

/* Meet the Author artwork and right-side caption */
#about .about-photo {
  position: relative !important;
  overflow: visible !important;
}

#about .marcus-bust-card {
  width: min(580px, 100%) !important;
  max-width: none !important;
  margin: 32px 0 0 !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 270px) minmax(150px, 220px) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 28px !important;
}

#about .about-bust {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center 24% !important;
  border: 1px solid rgba(45, 37, 27, 0.22) !important;
  box-shadow: 0 22px 50px rgba(20, 16, 12, 0.18) !important;
}

#about .marcus-bust-card figcaption {
  display: block !important;
  width: auto !important;
  max-width: 210px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-family: "Space Mono", monospace !important;
  font-size: 0.72rem !important;
  line-height: 1.75 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  opacity: 0.66 !important;
}

/* In Development — override the original centered narrow layout */
#future .future-inner.future-book-layout {
  width: min(1160px, calc(100% - 64px)) !important;
  max-width: 1160px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 90px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(270px, 360px) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: stretch !important;
  gap: clamp(54px, 7vw, 100px) !important;
  text-align: left !important;
}

#future .future-book-image {
  display: block !important;
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 !important;
  align-self: center !important;
  text-align: center !important;
}

#future .future-cover-frame {
  position: relative !important;
  width: 100% !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: rgba(7, 12, 17, 0.58) !important;
  border: 1px solid rgba(211, 181, 121, 0.42) !important;
  box-shadow: 0 28px 58px rgba(0,0,0,.44) !important;
}

#future .future-cover-frame img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 620px !important;
  object-fit: contain !important;
}

#future .future-status {
  margin: 16px 0 0 !important;
  font-family: "Space Mono", monospace !important;
  font-size: .7rem !important;
  line-height: 1.5 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  opacity: .76 !important;
}

#future .future-book-copy {
  display: block !important;
  width: 100% !important;
  max-width: 700px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  text-align: left !important;
}

#future .future-book-copy .eyebrow {
  margin: 0 0 16px !important;
  text-align: left !important;
}

#future .future-book-copy .section-title {
  display: block !important;
  width: 100% !important;
  max-width: 700px !important;
  margin: 0 0 26px !important;
  padding: 0 !important;
  font-size: clamp(2.4rem, 4vw, 4.5rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.025em !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-align: left !important;
}

#future .future-copy {
  display: block !important;
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-size: clamp(1rem, 1.2vw, 1.14rem) !important;
  line-height: 1.8 !important;
  text-align: left !important;
}

#future .future-book-copy .btn {
  margin-top: 8px !important;
}

@media (max-width: 850px) {
  #about .marcus-bust-card {
    grid-template-columns: minmax(190px, 240px) minmax(130px, 190px) !important;
    gap: 22px !important;
  }

  #future .future-inner.future-book-layout {
    width: min(100% - 40px, 760px) !important;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr) !important;
    gap: 38px !important;
    padding: 72px 0 !important;
  }

  #future .future-book-copy .section-title {
    font-size: clamp(2rem, 5vw, 3.25rem) !important;
  }
}

@media (max-width: 680px) {
  #about .marcus-bust-card {
    width: min(100%, 360px) !important;
    margin: 28px auto 0 !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #about .marcus-bust-card figcaption {
    max-width: none !important;
    text-align: right !important;
  }

  #future .future-inner.future-book-layout {
    width: min(100% - 32px, 560px) !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 64px 0 !important;
    text-align: center !important;
  }

  #future .future-book-image {
    width: min(310px, 82vw) !important;
    margin: 0 auto !important;
  }

  #future .future-book-copy,
  #future .future-book-copy .eyebrow,
  #future .future-book-copy .section-title,
  #future .future-copy {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #future .future-book-copy .section-title {
    font-size: clamp(2.1rem, 10vw, 3.35rem) !important;
  }
}


/* FINAL ABOUT BALANCE — photo left, biography center, cosmic Marcus right */
#about .about-balanced {
  width: min(1220px, calc(100% - 64px)) !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr) minmax(230px, 290px) !important;
  align-items: center !important;
  gap: clamp(42px, 5vw, 72px) !important;
}

#about .about-author-photo {
  width: 100% !important;
  align-self: center !important;
}

#about .about-author-photo .photo-frame {
  width: 100% !important;
  max-width: 310px !important;
  margin: 0 auto !important;
}

#about .about-text {
  max-width: 660px !important;
  margin: 0 !important;
}

#about .about-cosmic-card {
  width: 100% !important;
  max-width: 285px !important;
  margin: 0 !important;
  align-self: center !important;
  justify-self: end !important;
}

#about .about-cosmic-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center 24% !important;
  border: 1px solid rgba(45, 37, 27, 0.22) !important;
  box-shadow:
    0 24px 54px rgba(20, 16, 12, 0.2),
    0 0 34px rgba(166, 95, 59, 0.08) !important;
}

#about .about-cosmic-card figcaption {
  margin: 14px 0 0 !important;
  text-align: center !important;
  font-family: "Space Mono", monospace !important;
  font-size: 0.7rem !important;
  line-height: 1.65 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  opacity: 0.66 !important;
}

@media (max-width: 1050px) {
  #about .about-balanced {
    grid-template-columns: minmax(230px, 280px) minmax(360px, 1fr) minmax(190px, 230px) !important;
    gap: 34px !important;
  }
}

@media (max-width: 820px) {
  #about .about-balanced {
    width: min(100% - 40px, 760px) !important;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) !important;
    grid-template-areas:
      "photo text"
      "cosmic text" !important;
    align-items: start !important;
  }

  #about .about-author-photo {
    grid-area: photo !important;
  }

  #about .about-text {
    grid-area: text !important;
  }

  #about .about-cosmic-card {
    grid-area: cosmic !important;
    justify-self: center !important;
    max-width: 250px !important;
  }
}

@media (max-width: 680px) {
  #about .about-balanced {
    width: min(100% - 32px, 560px) !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "photo"
      "text"
      "cosmic" !important;
    gap: 34px !important;
    text-align: center !important;
  }

  #about .about-text {
    max-width: 100% !important;
  }

  #about .about-author-photo .photo-frame,
  #about .about-cosmic-card {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}