.exc-page {
  background: #fff;
  color: #082033;
  font-family: Montserrat, sans-serif;
}

.exc-page main { padding-top: 132px; }
.exc-page * { box-sizing: border-box; }
.exc-page ::selection { background: #b8dcd9; color: #082033; }
.exc-container { width: min(100% - 48px, 1160px); margin-inline: auto; }
.exc-page h1, .exc-page h2, .exc-page h3 { color: #082033; }
.exc-page a:focus-visible, .exc-page button:focus-visible, .exc-page video:focus-visible {
  outline: 3px solid #168b9b;
  outline-offset: 4px;
}

.exc-intro { padding: clamp(52px, 7vw, 100px) 0 clamp(40px, 5vw, 72px); }
.exc-intro h1 { max-width: 920px; margin: 0; font-size: 2.3rem; font-weight: 400; line-height: 1.18; letter-spacing: 0; text-wrap: balance; }
.exc-intro p { max-width: 720px; margin: 24px 0 0; color: #415e6b; font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.65; }
.exc-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 30px; color: #0c6782; font-size: .9rem; text-decoration: none; }
.exc-back:hover { text-decoration: underline; text-underline-offset: 4px; }

.exc-list { padding: clamp(48px, 6vw, 84px) 0 clamp(70px, 8vw, 120px); background: #f4f8f8; }
.exc-list__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.exc-list__heading h2 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 600; line-height: 1.2; }
.exc-list__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); }
.exc-gallery__viewport { overflow: hidden; touch-action: pan-y pinch-zoom; }
.exc-gallery__track { display: flex; }
.exc-card { position: relative; display: block; min-width: 0; height: clamp(430px, 41vw, 510px); overflow: hidden; border-radius: 10px; background: #123f51; color: #fff; text-decoration: none; }
.exc-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.exc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,20,31,.57), transparent 50%, rgba(2,20,31,.85)); pointer-events: none; }
.exc-page .exc-card__title, .exc-card__description, .exc-card__action { position: absolute; z-index: 1; left: 30px; right: 30px; color: #fff; }
.exc-card__title { top: 28px; margin: 0; font-size: clamp(2rem, 3vw, 2.9rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.exc-card__description { bottom: 80px; max-width: 440px; margin: 0; font-size: clamp(1rem, 1.25vw, 1.13rem); font-weight: 500; line-height: 1.45; }
.exc-card__action { display: flex; align-items: center; justify-content: space-between; bottom: 26px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.54); font-size: .89rem; font-weight: 600; }
.exc-card__action i { font-size: 1.1rem; transition: transform 250ms ease; }
.exc-card:hover .exc-card__action i, .exc-card:focus-visible .exc-card__action i { transform: translate(3px, -3px); }
.exc-arrow { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid #b9cdd3; border-radius: 50%; background: #fff; color: #0c6782; font-size: 1.12rem; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.exc-arrow:hover:not(:disabled) { background: #0c6782; border-color: #0c6782; color: #fff; }
.exc-arrow:disabled { opacity: .35; cursor: default; }
.exc-count { min-width: 44px; color: #52707b; font-size: .85rem; text-align: center; font-variant-numeric: tabular-nums; }

.exc-detail { display: grid; grid-template-columns: minmax(24px, 1fr) minmax(0, 470px) minmax(0, 650px) minmax(24px, 1fr); column-gap: 20px; }
.exc-detail > .exc-detail__intro { grid-column: 2; align-self: center; padding: 46px 0 64px; }
.exc-detail__intro .exc-container, .exc-video-section .exc-container { width: 100%; }
.exc-detail__intro h1 { max-width: 470px; }
.exc-detail__intro p { max-width: 440px; }
.exc-detail > .exc-video-section { grid-column: 3; align-self: center; padding: 46px 0 64px; }
.exc-detail > .exc-container { grid-column: 2 / 4; width: 100%; }
.exc-detail > .exc-program, .exc-detail > .exc-info, .exc-detail > .exc-gallery-section, .exc-detail > .exc-end { grid-column: 1 / -1; }
.exc-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #082033; color: #fff; object-fit: contain; }
.exc-facts { display: flex; flex-wrap: wrap; gap: 18px 36px; padding: 27px 0; border-top: 1px solid #d7e3e7; border-bottom: 1px solid #d7e3e7; }
.exc-fact { min-width: 155px; }
.exc-fact dt { color: #54707b; font-size: .78rem; }
.exc-fact dd { margin: 5px 0 0; color: #082033; font-weight: 600; }
.exc-program { padding: clamp(64px, 7vw, 100px) 0; background: #f4f8f8; }
.exc-program__layout { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(36px, 8vw, 128px); }
.exc-program h2, .exc-info h2, .exc-gallery-section h2 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.exc-program__body { max-width: 710px; font-size: 1rem; line-height: 1.8; }
.exc-program__body p { margin: 0 0 22px; }
.exc-program__body p:last-child { margin-bottom: 0; }
.exc-program__body ul { margin: 0; padding-left: 1.25rem; }
.exc-program__body li { padding-left: .3rem; margin-bottom: 10px; }
.exc-program__body strong { color: #0c6782; font-weight: 600; }
.exc-route { margin-top: 32px; padding-top: 19px; border-top: 1px solid #c8d8dc; color: #415e6b; line-height: 1.65; }
.exc-route strong { display: block; margin-bottom: 6px; color: #082033; }
.exc-info { padding: clamp(64px, 7vw, 100px) 0; }
.exc-info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 7vw, 100px); }
.exc-info__grid > div { padding-top: 22px; border-top: 1px solid #c8d8dc; }
.exc-info h2 { margin-bottom: 25px; font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
.exc-info ul { margin: 0; padding-left: 1.2rem; line-height: 1.75; }
.exc-info li { margin-bottom: 9px; }
.exc-info p { color: #415e6b; line-height: 1.75; }
.exc-gallery-section { padding: clamp(64px, 7vw, 100px) 0; background: #f4f8f8; }
.exc-gallery-section h2 { margin-bottom: 28px; }
.exc-gallery { max-width: 940px; margin-inline: auto; }
.exc-gallery__viewport { border-radius: 9px; background: #e3eced; }
.exc-gallery__slide { display: flex; flex: 0 0 100%; min-width: 0; height: min(61vw, 570px); min-height: 250px; align-items: center; justify-content: center; }
.exc-gallery__slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.exc-gallery__controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; }
.exc-end { padding: 32px 0 80px; }
.exc-end a { color: #0c6782; text-underline-offset: 4px; }
.exc-page footer a { color: inherit; text-underline-offset: 4px; }

@media (max-width: 991px) {
  .exc-page main { padding-top: 92px; }
  .exc-detail { grid-template-columns: 24px minmax(0, 1fr) 24px; column-gap: 0; }
  .exc-detail > .exc-detail__intro, .exc-detail > .exc-video-section, .exc-detail > .exc-container { grid-column: 2; }
  .exc-detail > .exc-detail__intro { padding: 48px 0 24px; }
  .exc-detail > .exc-video-section { padding: 0 0 56px; }
  .exc-detail__intro h1, .exc-detail__intro p { max-width: 720px; }
  .exc-program__layout { grid-template-columns: 1fr; }
  .exc-route { margin-top: 0; }
}

@media (max-width: 650px) {
  .exc-container { width: min(100% - 34px, 1160px); }
  .exc-intro { padding-top: 48px; }
  .exc-list__heading { display: block; }
  .exc-list__grid { grid-template-columns: 1fr; }
  .exc-card { height: 440px; }
  .exc-card__title, .exc-card__description, .exc-card__action { left: 22px; right: 22px; }
  .exc-detail { grid-template-columns: 17px minmax(0, 1fr) 17px; }
  .exc-detail > .exc-detail__intro { padding-top: 48px; }
  .exc-info__grid { grid-template-columns: 1fr; }
  .exc-gallery__slide { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .exc-card__action i, .exc-arrow { transition: none; }
}