.heritage-page {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  flex-direction: column;
  padding: max(27px, env(safe-area-inset-top)) 28px max(23px, env(safe-area-inset-bottom));
  color: #fff0cd;
  background:
    radial-gradient(circle at 79% 14%, rgba(255, 210, 106, 0.27), transparent 18%),
    linear-gradient(148deg, #bc0b21 0%, #850410 46%, #4c0108 100%);
}

.heritage-page__pattern,
.heritage-page__ribbon,
.heritage-page__lines {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.heritage-page__pattern {
  inset: 0;
  opacity: 0.2;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 2px, rgba(255, 236, 179, 0.48) 2.3px 2.8px, transparent 3px 6px),
    linear-gradient(90deg, rgba(255, 235, 177, 0.09) 1px, transparent 1px);
  background-size: 12px 12px, 37px 37px;
}

.heritage-page__ribbon--one {
  top: -57px;
  right: -30%;
  width: 91%;
  height: 136px;
  transform: rotate(21deg);
  background: linear-gradient(90deg, transparent, rgba(255, 114, 70, 0.74) 40%, rgba(255, 228, 139, 0.28));
}

.heritage-page__ribbon--two {
  bottom: 3%;
  left: -36%;
  width: 103%;
  height: 148px;
  transform: rotate(-19deg);
  background: linear-gradient(90deg, transparent 0 25%, rgba(67, 0, 7, 0.58) 25.4% 64%, rgba(255, 212, 111, 0.19) 64.5% 70%, transparent 70.5%);
}

.heritage-page__lines {
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 270px;
  opacity: 0.64;
}

.heritage-page__lines path {
  stroke: rgba(255, 223, 139, 0.82);
  stroke-width: 0.8;
  stroke-dasharray: 8 12;
}

.heritage-page__header,
.heritage-page__period,
.heritage-page__content,
.heritage-page__footer {
  position: relative;
  z-index: 1;
}

.heritage-page__header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffdf94;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.heritage-page__header i {
  width: 26px;
  height: 1px;
  background: #ffdf94;
}

.heritage-page__header p,
.heritage-page__period {
  margin: 0;
}

.heritage-page__period {
  margin-top: 11px;
  color: rgba(255, 227, 162, 0.58);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.heritage-page__content {
  width: min(100%, 540px);
  margin: auto 0;
  padding: 31px 0 25px;
}

.heritage-page__kicker {
  margin: 0 0 10px;
  color: #ffe0a0;
  font-family: "Songti SC", SimSun, serif;
  font-size: 15px;
  letter-spacing: 0.19em;
}

.heritage-page h2 {
  display: flex;
  flex-direction: column;
  margin: 0 0 20px;
  color: #fff4d7;
  font-family: "Songti SC", SimSun, serif;
  font-size: clamp(36px, 9.3vw, 50px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-shadow: 0 7px 22px rgba(87, 0, 8, 0.33);
}

.heritage-page h2 strong {
  color: #ffd87e;
  font-weight: 700;
}

.heritage-page__story {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(255, 239, 206, 0.87);
  font-family: "Songti SC", SimSun, serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.heritage-page__values {
  margin: 19px 0 17px;
  color: #fff2cf;
  font-family: "Songti SC", SimSun, serif;
  font-size: clamp(16px, 4.7vw, 21px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.08em;
}

.heritage-page__values strong {
  color: #fff2cf;
  font-weight: 700;
}

.heritage-page__finale {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  color: rgba(255, 237, 203, 0.86);
  font-family: "Songti SC", SimSun, serif;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.heritage-page__finale strong {
  color: #ffe29b;
  font-size: 14px;
}

.heritage-page__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.heritage-page__footer > span {
  max-width: 166px;
  color: rgba(255, 225, 157, 0.62);
  font-family: "Songti SC", SimSun, serif;
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0.08em;
}

.heritage-page__actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 3px;
}

.heritage-page__home,
.heritage-page__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.09em;
}

.heritage-page__home {
  color: #fff0bf;
  font-weight: 700;
}

.heritage-page__back {
  border-bottom: 1px solid rgba(255, 226, 151, 0.58);
  color: rgba(255, 230, 169, 0.75);
}

.heritage-page__back svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.heritage-page .heritage-page__header,
.heritage-page .heritage-page__period,
.heritage-page .heritage-page__kicker,
.heritage-page h2,
.heritage-page__story span,
.heritage-page__values strong,
.heritage-page__finale span,
.heritage-page__finale strong,
.heritage-page__footer {
  opacity: 0;
}

.heritage-page.is-active .heritage-page__header { animation: heritage-rise 580ms ease-out both; }
.heritage-page.is-active .heritage-page__period { animation: heritage-rise 580ms ease-out 80ms both; }
.heritage-page.is-active .heritage-page__kicker { animation: heritage-rise 600ms ease-out 180ms both; }
.heritage-page.is-active h2 { animation: heritage-rise 690ms cubic-bezier(0.2, 0.82, 0.3, 1) 300ms both; }
.heritage-page.is-active .heritage-page__story span,
.heritage-page.is-active .heritage-page__values strong,
.heritage-page.is-active .heritage-page__finale span,
.heritage-page.is-active .heritage-page__finale strong { animation: heritage-line 620ms cubic-bezier(0.2, 0.82, 0.3, 1) both; }
.heritage-page.is-active .heritage-page__story span:nth-child(1) { animation-delay: 390ms; }
.heritage-page.is-active .heritage-page__story span:nth-child(2) { animation-delay: 560ms; }
.heritage-page.is-active .heritage-page__values strong { animation-delay: 730ms; }
.heritage-page.is-active .heritage-page__finale span { animation-delay: 920ms; }
.heritage-page.is-active .heritage-page__finale strong { animation-delay: 1080ms; }
.heritage-page.is-active .heritage-page__footer { animation: heritage-rise 580ms ease-out 1320ms both; }
.heritage-page.is-active .heritage-page__ribbon--one { animation: heritage-ribbon-one 8s ease-in-out infinite; }
.heritage-page.is-active .heritage-page__ribbon--two { animation: heritage-ribbon-two 9s ease-in-out -1s infinite; }
.heritage-page.is-active .heritage-page__lines path { animation: heritage-current 3.2s linear infinite; }

@keyframes heritage-rise {
  from { opacity: 0; transform: translate3d(0, 15px, 0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes heritage-line {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes heritage-ribbon-one { 50% { transform: rotate(18deg) translate3d(-2%, 5px, 0); } }
@keyframes heritage-ribbon-two { 50% { transform: rotate(-16deg) translate3d(3%, -7px, 0); } }
@keyframes heritage-current { to { stroke-dashoffset: -42; } }

@media (min-width: 740px) {
  .heritage-page {
    width: min(100%, 720px);
    min-height: 920px;
    margin: 24px auto;
    box-shadow: 0 30px 90px rgba(62, 0, 6, 0.47);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heritage-page *,
  .heritage-page *::before,
  .heritage-page *::after {
    animation: none !important;
  }

  .heritage-page .heritage-page__header,
  .heritage-page .heritage-page__period,
  .heritage-page .heritage-page__kicker,
  .heritage-page h2,
  .heritage-page__story span,
  .heritage-page__values strong,
  .heritage-page__finale span,
  .heritage-page__finale strong,
  .heritage-page__footer {
    opacity: 1;
  }
}