.recital-main { overflow: hidden; background: var(--bg-about); }
.recital-hero { position: relative; overflow: hidden; padding: 48px 0 31px; background: var(--bg-about); }
.recital-hero::after { content: ""; position: absolute; top: 8px; right: 28px; width: 122px; height: 176px; background: url("../assets/images/deco-feature-right.png") center / contain no-repeat; opacity: .72; pointer-events: none; }
.recital-hero-inner { position: relative; z-index: 1; text-align: center; }
.recital-hero .section-title { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: .2em; }
.recital-hero-en { margin: 11px 0 0; color: var(--olive); text-align: center; font-size: 11px; font-style: normal; letter-spacing: .18em; }
.recital-hero .features-title-decoration { margin-top: 15px; margin-bottom: 0; }

.recital-intro { position: relative; padding: 78px 0 48px; background: var(--bg-about); }
.recital-intro-copy { position: relative; z-index: 1; }
.recital-intro h2 { width: max-content; margin: 0 0 34px; padding-bottom: 13px; border-bottom: 4px dotted #e3b631; font-size: 25px; font-weight: 600; letter-spacing: .12em; }
.intro-heading-leaf { margin-left: 15px; color: #e3b631; font-size: 30px; }
.recital-intro-text { max-width: 910px; }
.recital-intro-text p { margin: 0 0 25px; font-size: 15px; font-weight: 600; line-height: 2.05; }
.recital-intro-text p:last-child { margin-bottom: 0; }
.recital-intro-decoration { position: absolute; top: 95px; right: calc(var(--container-side-space) + 150px); width: 250px; max-height: 440px; object-fit: contain; opacity: .92; pointer-events: none; }

.recital-history { position: relative; padding-top: 6px; padding-bottom: 70px; }
.recital-event + .recital-event { margin-top: 64px; }
.event-heading { position: relative; isolation: isolate; width: fit-content; max-width: 100%; margin: 0 0 23px; display: flex; align-items: baseline; gap: 26px; font-weight: 400; line-height: 1.2; white-space: nowrap; }
.event-heading::before { content: ""; position: absolute; z-index: -1; top: -12px; bottom: -10px; left: -18px; width: calc(100% + 72px); border-radius: 32px; background-color: rgba(255, 246, 204, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='80' viewBox='0 0 600 80'%3E%3Cg fill='none' stroke='%23efd66a' stroke-width='1.5' stroke-linecap='round' opacity='.22'%3E%3Cpath d='M5 42 C82 13 154 63 238 34 S390 21 468 43 S555 46 596 26'/%3E%3Cpath d='M22 59 C103 34 165 70 252 50 S405 38 486 57 S560 59 598 45'/%3E%3C/g%3E%3C/svg%3E"); background-position: left center; background-size: cover; -webkit-mask-image: linear-gradient(to right, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 72%, transparent 100%); pointer-events: none; }
.event-date { flex: 0 0 auto; color: #77736b; font-size: 18px; letter-spacing: .06em; }
.event-title { color: #d98c00; font-size: 23px; letter-spacing: .13em; }
.event-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 38px; }
.event-photo { aspect-ratio: 1.58 / 1; border-radius: 0; box-shadow: 0 7px 14px rgba(36, 34, 30, .10); }
.event-photo { cursor: pointer; }
.event-photo:focus-visible { outline: 3px solid #d98c00; outline-offset: 4px; }

.recital-lightbox { position: fixed; z-index: 1000; inset: 0; padding: 40px; display: grid; place-items: center; background: rgba(20, 18, 14, .86); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.recital-lightbox.is-open { opacity: 1; visibility: visible; }
.recital-lightbox-image { max-width: min(1100px, 92vw); max-height: 86vh; display: block; object-fit: contain; box-shadow: 0 18px 55px rgba(0, 0, 0, .35); }
.recital-lightbox-close { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .22); font: 300 34px/1 sans-serif; cursor: pointer; }
.recital-lightbox-close:focus-visible { outline: 3px solid #f8ca3e; outline-offset: 3px; }
.recital-lightbox-nav { position: absolute; top: 50%; width: 54px; height: 70px; padding: 0; border: 0; color: #fff; background: rgba(0, 0, 0, .22); font: 300 48px/1 sans-serif; cursor: pointer; transform: translateY(-50%); }
.recital-lightbox-prev { left: 22px; }
.recital-lightbox-next { right: 22px; }
.recital-lightbox-nav:hover { background: rgba(0, 0, 0, .45); }
.recital-lightbox-nav:focus-visible { outline: 3px solid #f8ca3e; outline-offset: 3px; }
.recital-lightbox-caption { margin: 12px 0 0; color: #fff; font-size: 14px; text-align: center; }
body.is-lightbox-open { overflow: hidden; }

.recital-closing { margin-top: 90px; text-align: center; }
.recital-closing p { margin: 0; font-size: 22px; letter-spacing: .14em; }
.recital-closing span { width: 250px; margin: 18px auto 4px; display: block; border-top: 3px dotted #e3b631; }
.recital-closing img { width: 52px; height: 38px; object-fit: contain; }

@media screen and (max-width: 1100px) {
  .recital-intro-text { max-width: 74%; }
  .event-gallery { gap: 22px; }
}

@media screen and (max-width: 767px) {
  .recital-hero { padding: 38px 0 27px; }
  .recital-hero::after { top: 12px; right: 0; width: 72px; height: 128px; opacity: .45; }
  .recital-hero .section-title { font-size: 24px; }
  .recital-intro { padding: 48px 0 35px; }
  .recital-intro h2 { max-width: 100%; margin-bottom: 27px; padding-bottom: 10px; font-size: 20px; border-bottom-width: 3px; }
  .intro-heading-leaf { margin-left: 8px; font-size: 24px; }
  .recital-intro-text { max-width: none; }
  .recital-intro-text p { margin-bottom: 20px; font-size: 14px; font-weight: 500; line-height: 2; }
  .recital-intro-text br { display: none; }
  .recital-intro-decoration { top: 82px; right: -34px; width: 145px; opacity: .18; }
  .recital-history { padding-top: 10px; padding-bottom: 34px; }
  .recital-event + .recital-event { margin-top: 52px; }
  .event-heading { margin-bottom: 17px; gap: 12px; }
  .event-heading::before { top: -9px; bottom: -8px; left: -10px; width: calc(100% + 36px); border-radius: 22px; background-size: auto 100%; }
  .event-date { font-size: 18px; letter-spacing: .02em; }
  .event-title { font-size: 23px; letter-spacing: .03em; }
  .event-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .recital-lightbox { padding: 18px; }
  .recital-lightbox-image { max-width: 94vw; max-height: 78vh; }
  .recital-lightbox-close { top: 14px; right: 14px; width: 44px; height: 44px; }
  .recital-lightbox-nav { width: 42px; height: 58px; font-size: 38px; }
  .recital-lightbox-prev { left: 4px; }
  .recital-lightbox-next { right: 4px; }
  .recital-closing { margin-top: 62px; }
  .recital-closing p { font-size: 15px; line-height: 1.9; }
  .recital-closing span { width: 180px; margin-top: 13px; }
}

@media screen and (max-width: 374px) {
  .event-heading { gap: 8px; }
  .event-date { font-size: 18px; }
  .event-title { font-size: 23px; }
}