.about-page {
  overflow-x: clip;
  background: var(--color-bg-primary);
}

.about-page main {
  background:
    radial-gradient(circle at 58% 9rem, rgba(94, 155, 189, 0.12), transparent 31rem),
    radial-gradient(circle at 18% 34rem, rgb(var(--rgb-warm-editorial) / 0.07), transparent 29rem),
    linear-gradient(118deg, transparent 0 66%, rgba(139, 184, 207, 0.04) 66% 66.14%, transparent 66.14%),
    var(--color-bg-primary);
}

.about-hero {
  overflow: hidden;
  padding-block: clamp(4.6rem, 8vw, 7.2rem) clamp(3.5rem, 6vw, 5.4rem);
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.04), rgba(5, 6, 5, 0.76) 88%, var(--color-bg-primary)),
    radial-gradient(circle at 72% 42%, rgb(var(--rgb-warm-editorial) / 0.1), transparent 22rem),
    radial-gradient(circle at 30% 38%, rgba(94, 155, 189, 0.16), transparent 30rem),
    var(--color-bg-primary);
}

.about-hero__atmosphere {
  background-image:
    linear-gradient(90deg, rgba(5, 6, 5, 0.42), rgba(5, 6, 5, 0.12) 42%, rgba(5, 6, 5, 0.84)),
    linear-gradient(180deg, rgba(5, 6, 5, 0.08), rgba(5, 6, 5, 0.9)),
    url("../../images/hero/hero-atmosphere-draft.webp");
  background-position: 50% 42%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.4;
}

.about-hero::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(172deg, transparent 0 2.35rem, rgb(var(--rgb-warm-editorial) / 0.035) 2.35rem 2.42rem),
    repeating-radial-gradient(ellipse at 82% 31%, rgba(139, 184, 207, 0.13) 0 1px, transparent 1px 3.15rem),
    linear-gradient(111deg, transparent 0 37%, rgb(var(--rgb-warm-editorial) / 0.08) 37% 37.12%, transparent 37.12%);
  opacity: 0.36;
  pointer-events: none;
}

.about-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(var(--space-6), 6vw, var(--space-9));
  align-items: center;
}

.about-hero__portrait {
  position: relative;
  margin: 0;
  min-height: clamp(25rem, 82vw, 39rem);
  overflow: hidden;
}

.about-hero__portrait::before {
  content: "";
  position: absolute;
  inset-block: 4% 0;
  inset-inline: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 42% 40%, rgba(139, 184, 207, 0.15), transparent 14rem),
    linear-gradient(90deg, rgb(var(--rgb-warm-editorial) / 0.13), transparent 32%),
    repeating-linear-gradient(177deg, rgba(241, 238, 230, 0.08) 0 1px, transparent 1px 1.4rem);
  mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.72) 55%, transparent);
  opacity: 0.56;
}

.about-hero__image {
  width: min(100%, 31rem);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 1.5rem 2.6rem rgba(0, 0, 0, 0.48));
  mask-image: linear-gradient(180deg, #000 0 78%, transparent 100%);
}

.about-hero__content {
  max-width: 40rem;
}

.about-hero h1 {
  margin-block-end: var(--space-4);
  font-size: clamp(3.8rem, 10vw, 6.4rem);
  text-transform: uppercase;
}

.about-hero__descriptor {
  margin-block-end: var(--space-5);
  color: var(--color-warm-editorial);
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.about-hero__descriptor span {
  display: block;
}

.about-hero__intro {
  color: var(--color-text-secondary);
  font-size: var(--text-md);
}

.curiosity {
  overflow: hidden;
}

.curiosity__layout,
.inspiration__layout {
  display: grid;
  gap: clamp(var(--space-6), 7vw, var(--space-10));
  align-items: center;
}

.curiosity__content,
.inspiration__content {
  max-width: 38rem;
}

.curiosity__content {
  max-width: 46rem;
}

.curiosity h2,
.inspiration h2,
.about-series h2,
.about-closing h2 {
  margin-block-end: var(--space-5);
  text-transform: uppercase;
}

.curiosity__question,
.inspiration__question {
  margin-block: var(--space-5);
  border-inline-start: 2px solid rgb(var(--rgb-warm-editorial) / 0.7);
  color: var(--color-warm-editorial);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-style: italic;
  line-height: 1.42;
  padding-inline-start: var(--space-4);
}

.interest-list {
  display: grid;
  gap: clamp(var(--space-5), 4vw, var(--space-7));
}

.interest-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  border-block-start: 1px solid rgb(var(--rgb-warm-editorial) / 0.18);
  padding-block-start: var(--space-5);
}

.interest-item::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 3rem;
  height: 1px;
  background: var(--color-warm-editorial);
  opacity: 0.7;
}

.interest-item__icon {
  grid-row: 1 / span 2;
  width: clamp(4.5rem, 6vw, 5.6rem);
  height: clamp(4.5rem, 6vw, 5.6rem);
  color: rgb(var(--rgb-warm-editorial) / 0.74);
}

.interest-item__icon path,
.interest-item__icon circle,
.interest-item__icon ellipse {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.interest-item h3 {
  grid-column: 2;
  margin-block-end: var(--space-2);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
}

.interest-item p {
  grid-column: 2;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.inspiration {
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 42%, rgba(94, 155, 189, 0.12), transparent 28rem),
    radial-gradient(circle at 82% 28%, rgb(var(--rgb-warm-editorial) / 0.08), transparent 24rem),
    var(--color-bg-primary);
}

.inspiration__visual {
  margin: 0;
}

.inspiration__image-frame {
  position: relative;
  min-height: clamp(18rem, 58vw, 31rem);
  overflow: hidden;
  background: #030403;
  box-shadow: 0 1.2rem 2.2rem rgba(0, 0, 0, 0.2);
}

.inspiration__image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 58%, rgba(5, 6, 5, 0.84) 100%),
    linear-gradient(180deg, transparent 76%, rgba(5, 6, 5, 0.32) 100%);
  pointer-events: none;
}

.inspiration__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 46% 44%;
}

.about-series {
  overflow: hidden;
}

.about-series__heading {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  margin-block-end: clamp(var(--space-5), 5vw, var(--space-7));
  text-align: center;
}

.about-series__heading .eyebrow,
.about-series__heading h2 {
  max-width: 34rem;
  margin-inline: auto;
}

.about-books {
  display: grid;
  gap: clamp(var(--space-6), 6vw, var(--space-8));
}

.about-book {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  justify-items: start;
}

.about-book__content {
  width: 100%;
  max-width: 24rem;
}

.about-book h3 {
  margin-block-end: var(--space-3);
  font-size: clamp(1.7rem, 3.5vw, 2.2rem);
}

.about-book p {
  color: var(--color-text-secondary);
}

.about-book .status-label {
  margin-block-end: var(--space-3);
  color: var(--color-warm-editorial);
  font-size: var(--text-xs);
}

.about-book .button {
  margin-block-start: var(--space-4);
}

.hardcover-display {
  position: relative;
  display: grid;
  width: min(100%, 20rem);
  min-height: clamp(17rem, 58vw, 25rem);
  margin: 0;
  place-items: center;
}

.hardcover-display::before {
  content: "";
  position: absolute;
  inset-block: 16% 4%;
  inset-inline: 12%;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(0, 0, 0, 0.58), transparent 52%),
    radial-gradient(ellipse at 52% 36%, rgb(var(--rgb-warm-editorial) / 0.12), transparent 62%);
  opacity: 0.9;
  pointer-events: none;
}

.hardcover-display__image {
  position: relative;
  z-index: 1;
  width: min(48vw, 12rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1.25rem 1.7rem rgba(0, 0, 0, 0.42));
}

.about-closing p:not(.eyebrow) {
  max-width: 42rem;
  margin-inline: auto;
  color: var(--color-text-secondary);
}

@media (max-width: 35rem) {
  .about-closing .button,
  .about-book .button {
    width: 100%;
  }
}

@media (min-width: 48rem) {
  .about-book {
    grid-template-columns: minmax(12rem, 0.36fr) minmax(0, 0.64fr);
    gap: var(--space-5);
    align-items: center;
  }
}

@media (min-width: 64rem) {
  .about-hero {
    min-height: min(45rem, calc(100svh - var(--header-height)));
    display: grid;
    align-items: center;
  }

  .about-hero__layout {
    grid-template-columns: minmax(24rem, 0.88fr) minmax(0, 0.9fr);
  }

  .about-hero__image {
    width: min(42vw, 34rem);
    margin-inline: 0 auto;
  }

  .about-hero__portrait {
    min-height: clamp(31rem, 42vw, 41rem);
  }

  .curiosity__layout {
    grid-template-columns: minmax(0, 0.64fr) minmax(20rem, 0.36fr);
    gap: clamp(var(--space-6), 5vw, var(--space-8));
  }

  .curiosity__content {
    border-inline-end: 1px solid rgba(241, 238, 230, 0.16);
    padding-inline-end: clamp(var(--space-5), 3.4vw, var(--space-7));
  }

  .inspiration__layout {
    grid-template-columns: minmax(22rem, 0.43fr) minmax(0, 0.57fr);
  }

  .hardcover-display {
    min-height: clamp(18rem, 24vw, 25rem);
  }
}

@media (min-width: 75rem) {
  .about-books {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--space-5), 4vw, var(--space-7));
  }

  .about-book {
    grid-template-columns: none;
    gap: var(--space-5);
    justify-items: center;
    text-align: center;
  }

  .about-book h3 {
    font-size: clamp(1.35rem, 1.45vw, 1.55rem);
    white-space: nowrap;
  }

  .hardcover-display__image {
    width: min(15.4vw, 14rem);
  }
}

@media (min-width: 80rem) {
  .about-hero__layout {
    grid-template-columns: minmax(28rem, 0.92fr) minmax(28rem, 0.88fr);
  }

  .about-hero__content {
    transform: translateX(-1.5rem);
  }
}