body.concept-a { background: var(--tr-bg); }
.concept-a .site-header { background: rgba(247,243,235,.96); }
.hero-a { min-height: 720px; position: relative; display: flex; align-items: center; background: url('images/hero-temple.png') center 52% / cover no-repeat; color: #ffffff; }
.hero-a-shade { position: absolute; inset: 0; background: rgba(16,32,24,.48); }
.hero-a-content { position: relative; z-index: 1; padding: 92px 0 104px; }
.hero-a .eyebrow { color: #f2d58d; }
.hero-a h1 { max-width: 900px; margin-bottom: 25px; font-family: "Noto Serif KR", serif; font-size: 64px; font-weight: 600; }
.hero-a-content > p:not(.eyebrow) { max-width: 660px; margin-bottom: 34px; font-size: 19px; color: #edf2ee; }
.hero-a .hero-main-btn { background: #ffffff; border-color: #ffffff; color: var(--tr-pine); }
.snapshot-a { padding: 0 0 20px; }
.snapshot-a .fact-grid { background: var(--tr-surface); }
.snapshot-a .fact-note { margin-bottom: 0; }
.concept-a .timeline-section { background: var(--tr-bg); }
.concept-a .archive-section { background: var(--tr-bg); }
.section-link { margin-top: 38px; display: flex; justify-content: flex-end; }
.concept-a .page-hero { background: var(--tr-bg); }
.concept-a .story-section { background: var(--tr-bg); }
.concept-a .archive-page { background: var(--tr-bg); }
.concept-a .host-reverse .host-media { order: 2; }

@media (max-width: 768px) {
  .hero-a { min-height: 650px; align-items: flex-end; background-position: 57% center; }
  .hero-a-content { padding: 88px 0 70px; }
  .hero-a h1 { font-size: 39px; }
  .hero-a-content > p:not(.eyebrow) { font-size: 16px; }
  .snapshot-a { padding-top: 18px; }
  .concept-a .host-reverse .host-media { order: 0; }
}