:root {
  --selected-line: rgba(255, 255, 255, .14);
  --selected-page-gutter: 15px;
}

@media (min-width: 576px) {
  :root { --selected-page-gutter: calc((100% - 540px) / 2 + 15px); }
}

@media (min-width: 768px) {
  :root { --selected-page-gutter: calc((100% - 720px) / 2 + 15px); }
}

@media (min-width: 992px) {
  :root { --selected-page-gutter: calc((100% - 960px) / 2 + 15px); }
}

@media (min-width: 1200px) {
  :root { --selected-page-gutter: calc((100% - 1140px) / 2 + 15px); }
}

@media (max-width: 575.98px) {
  :root { --selected-page-gutter: 31px; }
}

.selected-performances-page {
  background: var(--color-4);
  color: #fff;
}

.selected-performances-page main {
  overflow: clip;
}

.selected-performances-page .skip-link {
  background: #fff;
  color: #111 !important;
  left: 1rem;
  padding: .75rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 1000;
}

.selected-performances-page .skip-link:focus { top: 1rem; }

.selected-performances-page main h3,
.selected-story__number,
.selected-article-meta span {
  color: var(--color-1);
  font-family: 'Catamaran', 'Noto Sans TC', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .4em;
  line-height: 1.5;
}

.selected-performances-page header .nav_wrap h3,
.selected-performances-page footer h3 {
  color: #fff;
}

/* 精選演出總覽：沿用正式站的首屏、段落與按鈕。 */
.selected-archive-hero .fixed_bg { background-position: center; }
.selected-archive-intro p { margin-bottom: 0; }

.selected-archive-list__header {
  border-bottom: 1px solid var(--selected-line);
  margin-bottom: 5rem;
  padding-bottom: 1.5rem;
}

.selected-archive-list__header h3 { margin: 0; }

.selected-record-card {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(18rem, 1.1fr) minmax(17rem, .9fr);
}

.selected-record-card + .selected-record-card {
  margin-top: clamp(6rem, 10vw, 10rem);
}

.selected-record-card__image {
  aspect-ratio: 1.5;
  overflow: hidden;
}

.selected-record-card__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.selected-record-card__date {
  color: var(--color-1);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .4em;
  margin: 0 0 1rem;
}

.selected-record-card__type {
  color: var(--color-light);
  font-size: .875rem;
  margin: 0;
}

.selected-record-card h2 {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  margin: 2rem 0 1.25rem;
}

.selected-record-card__title-line { white-space: nowrap; }

.selected-record-card__summary {
  color: var(--color-light);
  margin-bottom: 2rem;
  max-width: 29rem;
}

/* 平板直向空間不足時，改為上下閱讀，保留標題的安全邊界。 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .selected-record-card {
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .selected-record-card__content,
  .selected-record-card__summary { max-width: 34rem; }
}

/* 文章首屏 */
.selected-article-hero {
  background: transparent;
  overflow: clip;
  position: relative;
}

.selected-article-hero--chunghwa-post .selected-article-hero__background {
  background-position: left center;
}

.selected-article-hero__content { position: relative; }
.selected-article-hero__content .row > [class*='col-'] {
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  padding-bottom: clamp(2.5rem, 6svh, 4.5rem);
}
.selected-article-hero h3 + h1 { margin-top: 2rem; }

.selected-article-hero__subtitle {
  color: var(--color-light);
  font-size: 1rem;
  margin: 1rem 0 0;
}

.selected-article-hero__credit {
  bottom: 1.25rem;
  color: rgba(255, 255, 255, .7);
  font-size: .7rem;
  letter-spacing: .1em;
  margin: 0;
  position: absolute;
  right: 2rem;
}

.selected-article-meta {
  background: var(--color-3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  max-width: none;
  padding: 3.5rem var(--selected-page-gutter);
  width: 100%;
}

.selected-article-meta div {
  border-left: 1px solid var(--selected-line);
  min-height: 4rem;
  padding: 0 clamp(1rem, 2vw, 2.5rem);
}

.selected-article-meta div:first-child {
  border-left: 0;
  padding-left: 0;
}

.selected-article-meta span {
  display: block;
  margin-bottom: .65rem;
}

.selected-article-meta strong {
  font-family: 'Noto Serif TC', serif;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.7;
}

/* 文章內容 */
.selected-article-lead {
  background: var(--color-4);
  margin: 0;
  max-width: none;
  padding: 8rem var(--selected-page-gutter);
  width: 100%;
}

.selected-article-lead h3,
.selected-article-lead h2,
.selected-article-lead p {
  margin-left: auto;
  margin-right: auto;
  max-width: 50rem;
}

.selected-article-lead h2 { margin: 4rem auto 2rem; }

.selected-article-lead p,
.selected-festival-context__copy p,
.selected-story__copy p:not(.selected-story__number),
.selected-three-doves-cta p,
.selected-related p {
  color: var(--color-light);
  line-height: 1.9;
}

.selected-festival-context {
  align-items: center;
  background: var(--color-4);
  display: grid;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, .85fr);
  padding: 8rem var(--selected-page-gutter);
}

.selected-festival-context__posters {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: 32rem;
}

.selected-festival-context__posters--single { grid-template-columns: 1fr; }

.selected-festival-context__posters--single img { aspect-ratio: 1.5; }

.selected-festival-context__posters figure {
  margin: 0;
  overflow: hidden;
}

.selected-festival-context__posters img {
  aspect-ratio: 1;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.selected-festival-context__copy { max-width: 31rem; }

.selected-festival-context--copy-first {
  grid-template-columns: minmax(0, 1fr);
}

.selected-festival-context--copy-first .selected-festival-context__copy {
  margin-left: auto;
  margin-right: auto;
  max-width: 50rem;
}

.selected-article-lead--chunghwa-post { padding-bottom: 4rem; }

.selected-article-lead--chunghwa-post + .selected-festival-context { padding-top: 5rem; }

.selected-festival-context h2,
.selected-story__copy h2,
.selected-three-doves-cta h2,
.selected-related h2 {
  margin: 4rem 0 2rem;
}

.selected-story {
  background: var(--color-3);
  margin: 0;
  max-width: none;
  padding: 8rem var(--selected-page-gutter) 10rem;
  width: 100%;
}

.selected-story__section {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 8vw, 8rem);
  grid-template-columns: minmax(17rem, .85fr) minmax(17rem, 1fr);
  margin-bottom: 9rem;
}

.selected-story__section--reverse {
  grid-template-columns: minmax(17rem, 1fr) minmax(17rem, .85fr);
}

.selected-story__section--reverse > :last-child { order: -1; }
.selected-story__copy { max-width: 31rem; }
.selected-story__number { margin: 0; }

.selected-story__image,
.selected-story__wide,
.selected-story__final { margin: 0; }

.selected-story__image button,
.selected-story__wide button,
.selected-story__final button {
  background: none;
  border: 0;
  cursor: zoom-in;
  display: block;
  padding: 0;
  width: 100%;
}

.selected-story__image img,
.selected-story__wide img,
.selected-story__final img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.selected-story__image img {
  aspect-ratio: 1.45;
  max-height: 32rem;
}

.selected-story__image--portrait {
  justify-self: center;
  max-width: 24rem;
}

.selected-story__image--portrait img {
  aspect-ratio: 2 / 3;
  max-height: 36rem;
}

.selected-story__pair {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  max-width: 42rem;
}

.selected-story__pair .selected-story__image:last-child { padding-top: 2rem; }

.selected-story__wide,
.selected-story__final {
  margin: 0 auto 9rem;
  max-width: 56rem;
}

.selected-story__wide img,
.selected-story__final img {
  aspect-ratio: 1.6;
  max-height: 35rem;
}

.selected-story__image figcaption,
.selected-story__wide figcaption,
.selected-story__final figcaption {
  color: #8f8f8f;
  font-size: .7rem;
  letter-spacing: .1em;
  line-height: 1.8;
  margin-top: .75rem;
}

.selected-story__section--work { margin-bottom: 7rem; }

.selected-three-doves-cta {
  background: var(--color-4) url('../img/selected-performances/taipei-international-magic-festival/09-1920.jpg') center / cover;
  min-height: 0;
  padding: 8rem 0;
  position: relative;
  text-align: center;
}

.selected-three-doves-cta--taoyuan-library {
  background-image: url('../img/selected-performances/taoyuan-library-beyond-imagination/1-1920.jpg');
}

.selected-three-doves-cta--chunghwa-post {
  background-image: url('../img/selected-performances/chunghwa-post-press-conference/press-wall-1920.jpg');
  background-position: 24% center;
}

.selected-three-doves-cta::before {
  background: rgba(19, 20, 36, .78);
  content: '';
  inset: 0;
  position: absolute;
}

.selected-three-doves-cta .container {
  max-width: 42rem;
  position: relative;
  z-index: 1;
}

.selected-three-doves-cta p {
  margin: 0 auto 2.5rem;
  max-width: 34rem;
}

.selected-related {
  background: var(--color-4);
  margin: 0;
  max-width: none;
  padding: 8rem var(--selected-page-gutter);
  width: 100%;
}

.selected-related__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.selected-related p { max-width: 50rem; }

.selected-news {
  background: var(--color-4);
  margin: 0;
  max-width: none;
  padding: 8rem var(--selected-page-gutter) 10rem;
  width: 100%;
}

.selected-news__heading {
  margin: 0 auto 4rem;
  max-width: 50rem;
}

.selected-news__heading h2 {
  margin: 4rem 0 2rem;
}

.selected-news__heading p {
  color: var(--color-light);
  line-height: 1.9;
  margin-bottom: 0;
}

.selected-news__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 71.25rem;
}

.selected-news__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.selected-news-video { min-width: 0; }

.selected-news-video__player {
  aspect-ratio: 16 / 9;
  background: #05060d;
  border: 1px solid var(--selected-line);
  display: block;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.selected-news-video__player::after {
  background: rgba(7, 8, 18, .25);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: background-color .3s ease;
}

.selected-news-video__player img,
.selected-news-video__player iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.selected-news-video__player img {
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .65, .25, 1);
}

.selected-news-video__play {
  border: 1px solid rgba(255, 255, 255, .8);
  height: 3.75rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3.75rem;
  z-index: 1;
}

.selected-news-video__play::after {
  border-bottom: .45rem solid transparent;
  border-left: .7rem solid #fff;
  border-top: .45rem solid transparent;
  content: '';
  left: 52%;
  position: absolute;
  top: 50%;
  transform: translate(-40%, -50%);
}

.selected-news-video__player:hover::after,
.selected-news-video__player:focus-visible::after { background: rgba(7, 8, 18, .08); }

.selected-news-video__player:hover img,
.selected-news-video__player:focus-visible img { transform: scale(1.03); }

.selected-news-video h3 {
  color: #fff;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: .875rem;
  letter-spacing: .12em;
  margin: 1.25rem 0 0;
  text-align: center;
}

.selected-lightbox {
  align-items: center;
  background: rgba(0, 0, 0, .95);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 2rem;
  pointer-events: none;
  position: fixed;
  transition: opacity .25s;
  z-index: 1000;
}

.selected-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.selected-lightbox__image {
  max-height: 90vh;
  max-width: 92vw;
  object-fit: contain;
}

.selected-lightbox__close {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font: 300 2.6rem/1 sans-serif;
  position: absolute;
  right: 1rem;
  top: .8rem;
}

[data-selected-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

[data-selected-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 高像素手機與平板不可沿用 960px 圖片，避免滿版 Hero 放大後失焦。 */
@media (max-width: 991.98px) {
  .selected-article-hero .selected-article-hero__background {
    background-image: url('../img/selected-performances/taipei-international-magic-festival/hero-mobile-3200.jpg') !important;
  }

  .selected-article-hero--taoyuan-library .selected-article-hero__background {
    background-image: url('../img/selected-performances/taoyuan-library-beyond-imagination/hero-mobile-3200.jpg') !important;
  }

  .selected-article-hero--chunghwa-post .selected-article-hero__background {
    background-image: url('../img/selected-performances/chunghwa-post-press-conference/hero-mobile-3200.jpg') !important;
  }
}

@media (max-width: 767.98px) {
  .selected-archive-hero .fixed_bg { background-image: url('../img/selected-performances/taipei-international-magic-festival/01-960.webp'); background-position: 58% center; }
  .selected-article-hero .selected-article-hero__background { background-position: 58% center; }
  .selected-article-hero--taoyuan-library .selected-article-hero__background { background-position: 43% center; }
  .selected-article-hero--chunghwa-post .selected-article-hero__background { background-position: left center; }
  .selected-three-doves-cta--taoyuan-library { background-position: 12% center; }
  .selected-three-doves-cta--chunghwa-post { background-position: 18% center; }
  .selected-archive-list__header { margin-bottom: 3rem; }

  /* 手機版改為單欄閱讀節奏：先讀文字，再以足夠尺寸觀看每張舞台照片。 */
  .selected-article-hero {
    min-height: 40rem;
    min-height: 78svh;
  }

  .selected-article-hero h3 + h1 { margin-top: 1.5rem; }
  .selected-article-hero__subtitle { margin-top: 1.5rem; }

  .selected-article-hero.paragraph.is_title .sep_vt {
    height: 14svh;
    margin-bottom: 0;
    min-height: 5rem;
  }

  .selected-article-hero__content,
  .selected-article-hero__content .row {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    width: 100%;
  }

  .selected-article-hero__content .col-lg-10 {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .selected-article-hero h1,
  .selected-article-hero h3,
  .selected-article-hero__subtitle { text-align: center; }

  .selected-record-card,
  .selected-festival-context,
  .selected-story__section,
  .selected-story__section--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .selected-performances-page,
  .selected-performances-page main,
  .selected-performances-page article,
  .selected-performances-page footer {
    max-width: 100%;
    overflow-x: clip;
  }

  .selected-article-page picture,
  .selected-article-page figure,
  .selected-article-page img,
  .selected-article-page .container,
  .selected-article-page .row,
  .selected-article-page [class*='col-'] {
    max-width: 100%;
    min-width: 0;
  }

  .selected-article-page h1,
  .selected-article-page h2,
  .selected-article-page h3,
  .selected-article-page p,
  .selected-article-page strong,
  .selected-article-page figcaption {
    overflow-wrap: anywhere;
  }

  .selected-record-card { gap: 2.5rem; }
  .selected-record-card h2 { font-size: clamp(1.75rem, 10vw, 2.5rem); }
  .selected-article-hero__subtitle { font-size: .875rem; }

  .selected-article-hero__credit {
    bottom: 2rem;
    left: auto;
    right: 1.5rem;
  }


  .selected-article-meta {
    gap: 1.5rem 0;
    grid-template-columns: 1fr 1fr;
    padding: 2.25rem var(--selected-page-gutter);
  }

  .selected-article-meta div { min-height: 3.4rem; }
  .selected-article-meta strong { font-size: .8125rem; line-height: 1.65; }

  .selected-article-meta div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .selected-article-lead,
  .selected-festival-context,
  .selected-story,
  .selected-news,
  .selected-three-doves-cta,
  .selected-related {
    padding-bottom: 8rem;
    padding-top: 8rem;
  }

  .selected-article-lead {
    max-width: none;
    padding-bottom: 5rem;
    padding-top: 8rem;
  }
  .selected-article-lead h2,
  .selected-festival-context h2,
  .selected-story__copy h2,
  .selected-three-doves-cta h2,
  .selected-related h2 {
    font-size: 2rem;
    line-height: 1.45;
    margin: 2.25rem 0 1.25rem;
  }

  .selected-article-lead p,
  .selected-festival-context__copy p,
  .selected-story__copy p:not(.selected-story__number),
  .selected-three-doves-cta p,
  .selected-related p { line-height: 1.85; }

  .selected-festival-context {
    padding-left: var(--selected-page-gutter);
    padding-right: var(--selected-page-gutter);
  }

  .selected-festival-context__posters { gap: .75rem; }
  .selected-festival-context__copy { max-width: none; }

  .selected-article-lead--chunghwa-post { padding-bottom: 2.5rem; }
  .selected-article-lead--chunghwa-post + .selected-festival-context { padding-top: 5rem; }

  .selected-news {
    padding-left: var(--selected-page-gutter);
    padding-right: var(--selected-page-gutter);
  }

  .selected-news__heading { margin-bottom: 3rem; }
  .selected-news__heading h2 { font-size: 2rem; line-height: 1.45; margin: 2.25rem 0 1.25rem; }
  .selected-news__heading p { line-height: 1.85; }
  .selected-news__grid,
  .selected-news__grid--two { gap: 3rem; grid-template-columns: minmax(0, 1fr); }

  .selected-story {
    padding-left: var(--selected-page-gutter);
    padding-right: var(--selected-page-gutter);
  }

  .selected-story__section--reverse > :last-child { order: initial; }

  .selected-story__section { gap: 2.5rem; }

  .selected-story__section,
  .selected-story__wide,
  .selected-story__final { margin-bottom: 4.75rem; }

  .selected-story__image--portrait,
  .selected-story__pair,
  .selected-story__wide,
  .selected-story__final { max-width: 100%; }

  .selected-story__image--portrait { max-width: 19rem; }
  .selected-story__pair { gap: 1rem; grid-template-columns: 1fr; }
  .selected-story__pair .selected-story__image:last-child { padding-top: 0; }
  .selected-story__image img { max-height: none; }
  .selected-story__wide img,
  .selected-story__final img { max-height: none; }

  .selected-three-doves-cta {
    min-height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .selected-three-doves-cta .container { max-width: 24rem; }

  .selected-related__links {
    display: flex;
    gap: .75rem;
  }

  .selected-related__links .button { width: 160px; }
}

@media (max-width: 359.98px) {
  .selected-related__links .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}