/* Page artwork and reading rhythm are limited to the lower-page templates. */
.detail-visuals .page-heading-visual {
  padding-top: 46px;
  padding-bottom: 64px;
}
.detail-visuals .page-heading-visual .breadcrumb {
  margin-bottom: 34px;
  line-height: 1.9;
}
.detail-visuals .page-heading-layout {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
}
.detail-visuals .page-heading-copy { min-width: 0; }
.detail-visuals .page-heading-visual h1 {
  margin: 0;
  color: #1f3a5f;
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.detail-visuals .page-heading-visual .page-intro {
  max-width: 36em;
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .015em;
}
.detail-visuals .page-heading-art {
  width: 100%;
  min-width: 0;
  margin: 0;
  animation: page-art-arrive .7s ease-out;
}
.detail-visuals .page-heading-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.detail-visuals .page-heading-art-photo {
  overflow: hidden;
  border-radius: 32px;
}
.detail-visuals .page-heading-art-photo img { object-fit: cover; }
.detail-visuals .page-heading-compact { padding-bottom: 42px; }
.detail-visuals .page-heading-compact .page-heading-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 40px;
}
.detail-visuals .page-heading-compact .page-heading-art {
  max-width: 320px;
  justify-self: end;
}
.detail-visuals .page-heading-compact h1 { font-size: clamp(34px, 3vw, 44px); }
.detail-visuals .reading-main {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}
.detail-visuals .reading-document {
  max-width: 780px;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
}
.detail-visuals .reading-document p { margin-bottom: 26px; }
.detail-visuals .reading-document h2 {
  margin: 64px 0 28px;
  padding-top: 38px;
  color: #1f3a5f;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .025em;
}
.detail-visuals .reading-document h3 {
  margin: 40px 0 18px;
  color: #1f3a5f;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.65;
}
.detail-visuals .reading-document > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.detail-visuals .reading-document .reading-contact h2 {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.detail-visuals .reading-document li { margin-block: 8px; }
.detail-visuals .page-inline-art {
  max-width: 660px;
  margin: 52px auto 40px;
}
.detail-visuals .page-inline-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.detail-visuals .page-about .reading-document h3:is(#section-5, #section-9, #section-10, #section-11, #section-12, #section-14, #section-18, #section-22, #section-23) {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid #e1e4e8;
  font-size: 28px;
}
.detail-visuals .page-about .reading-document h3:is(#section-6, #section-7, #section-8, #section-15, #section-16, #section-17, #section-19, #section-20, #section-21) {
  margin-top: 32px;
  color: #3d6255;
  font-size: 23px;
}
.detail-visuals .page-about .page-inline-art + h3#section-9 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@keyframes page-art-arrive {
  from { opacity: .65; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1451px) {
  .detail-visuals .reading-shell {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: clamp(42px, 4vw, 64px);
  }
}
@media (max-width: 1099px) {
  .detail-visuals .page-heading-visual { padding-top: 36px; }
  .detail-visuals .page-heading-layout { gap: 30px; }
  .detail-visuals .page-heading-visual h1 { font-size: 36px; }
}
@media (max-width: 760px) {
  .detail-visuals .page-heading-visual { padding-top: 28px; padding-bottom: 40px; }
  .detail-visuals .page-heading-visual .breadcrumb { margin-bottom: 26px; }
  .detail-visuals .page-heading-layout,
  .detail-visuals .page-heading-compact .page-heading-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .detail-visuals .page-heading-visual h1 { font-size: clamp(30px, 4.8vw, 36px); line-height: 1.55; }
  .detail-visuals .page-heading-visual .page-intro { margin-top: 18px; font-size: 17px; }
  .detail-visuals .page-heading-art { max-width: 560px; justify-self: center; }
  .detail-visuals .page-heading-art-photo { border-radius: 24px; }
  .detail-visuals .page-heading-compact { padding-bottom: 30px; }
  .detail-visuals .page-heading-compact .page-heading-layout { gap: 20px; }
  .detail-visuals .page-heading-compact .page-heading-art { max-width: 240px; justify-self: center; }
  .detail-visuals .reading-document { font-size: 17px; }
  .detail-visuals .reading-document h2 { margin-top: 48px; padding-top: 30px; font-size: 27px; }
  .detail-visuals .reading-document h3 { font-size: 23px; }
  .detail-visuals .page-about .reading-document h3:is(#section-5, #section-9, #section-10, #section-11, #section-12, #section-14, #section-18, #section-22, #section-23) { margin-top: 46px; padding-top: 26px; font-size: 25px; }
  .detail-visuals .page-about .reading-document h3:is(#section-6, #section-7, #section-8, #section-15, #section-16, #section-17, #section-19, #section-20, #section-21) { font-size: 21px; }
  .detail-visuals .page-inline-art { margin-block: 40px 30px; }
  .detail-visuals .page-about .page-inline-art + h3#section-9 { margin-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-visuals .page-heading-art { animation: none; }
}