:root {
  --wine: #8f5360;
  --wine-soft: rgba(143, 83, 96, 0.13);
  --indigo: #7187b6;
  --gold: #c4a66d;
}

.courage-page .article-hero::before {
  background: url("/assets/courage-choice/rena-wildflower.webp") center 42% / cover no-repeat;
  filter: saturate(0.62) contrast(1.08) brightness(0.68);
}

.courage-page .article-hero::after {
  background:
    linear-gradient(90deg, rgba(7, 9, 10, 0.98) 0%, rgba(7, 9, 10, 0.94) 44%, rgba(7, 9, 10, 0.55) 70%, rgba(7, 9, 10, 0.42) 100%),
    linear-gradient(180deg, rgba(7, 9, 10, 0.2) 0%, rgba(7, 9, 10, 0.08) 42%, #0b0c0f 100%);
}

.courage-page .hero-stage {
  grid-template-columns: minmax(0, 760px);
}

.courage-page .hero-copy {
  max-width: 760px;
}

.courage-page .hero-copy h1 {
  font-size: 4.25rem;
}

.courage-page .hero-copy h1 small {
  margin-top: 0.45rem;
  color: #d8c492;
  font-size: 2.25rem;
}

.hero-thesis {
  max-width: 41rem;
  margin-top: 1rem;
  color: rgba(238, 233, 223, 0.58);
  font-family: "Noto Serif SC", serif;
  font-size: 0.96rem;
  line-height: 1.85;
}

.foreword {
  margin: 0 0 2.8rem;
  padding: 1.35rem 1.4rem;
  border-left: 3px solid rgba(113, 135, 182, 0.62);
  border-radius: 0 6px 6px 0;
  background: rgba(113, 135, 182, 0.08);
}

.foreword p {
  margin: 0;
  color: rgba(238, 233, 223, 0.7);
  font-size: 0.94rem;
  line-height: 1.9;
  text-align: left;
}

.foreword .foreword-label {
  margin-bottom: 0.35rem;
  color: #aebde0;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 0.76rem;
  line-height: 1.5;
  font-weight: 700;
}

.courage-page .essay-body blockquote {
  border-left-color: #788663;
  background: rgba(120, 134, 99, 0.12);
  color: #dfdfc0;
}

.essay-scene {
  margin: 2.5rem 0 2.8rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #090b0c;
}

.essay-scene img {
  width: 100%;
  height: auto;
  aspect-ratio: 1001 / 751;
  display: block;
  object-fit: contain;
  background: #070809;
}

.essay-scene figcaption {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  color: rgba(238, 233, 223, 0.48);
  font-family: "Noto Sans SC", sans-serif;
  font-size: 0.78rem;
  line-height: 1.65;
}

.closing-line {
  margin-top: 2rem !important;
  padding: 1.25rem 1.35rem;
  border-top: 1px solid rgba(196, 166, 109, 0.34);
  border-bottom: 1px solid rgba(196, 166, 109, 0.34);
  color: #ead9af;
  font-size: 1.12rem;
  line-height: 1.95;
}

@media (max-width: 980px) {
  .courage-page .hero-stage {
    grid-template-columns: minmax(0, 720px);
  }

  .courage-page .hero-copy h1 {
    font-size: 3.5rem;
  }
}

@media (max-width: 680px) {
  .courage-page .article-hero::before {
    background-position: 58% center;
  }

  .courage-page .article-hero::after {
    background:
      linear-gradient(90deg, rgba(7, 9, 10, 0.96), rgba(7, 9, 10, 0.68)),
      linear-gradient(180deg, rgba(7, 9, 10, 0.2), rgba(7, 9, 10, 0.34) 48%, #0b0c0f 100%);
  }

  .courage-page .hero-copy h1 {
    max-width: 20rem;
    font-size: 2.75rem;
  }

  .courage-page .hero-copy h1 small {
    font-size: 1.55rem;
  }

  .hero-thesis {
    max-width: 21rem;
    font-size: 0.9rem;
  }

  .foreword {
    padding: 1.1rem;
  }

  .essay-scene {
    margin-left: -1rem;
    margin-right: -1rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .closing-line {
    padding: 1.05rem 0;
    font-size: 1.04rem;
  }
}