/* The project identity stays outside the horizontal camera track. */
.home-live { display: grid; grid-template-columns: 30% minmax(0, 1fr); min-height: 100svh; color: var(--green); background: #f7f5f1; scroll-margin-top: 0; }
.home-live__project { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; padding: 115px 10% 65px; text-align: center; background: transparent; }
.home-live__identity { margin: 0; font-family: "Noto Sans TC", sans-serif; }
.home-live__identity > p:first-child { margin: 0 0 25px; font-size: 13px; font-weight: 400; letter-spacing: .18em; opacity: .7; }
.home-page .home-live h2 { font-family: "Noto Sans TC", sans-serif; font-size: clamp(30px, 2.6vw, 46px); font-weight: 400; letter-spacing: .11em; line-height: 1.55; }
.home-live__rule { display: block; width: 40px; height: 1px; margin: 32px auto; background: currentColor; opacity: .4; }
.home-live__intro { font-size: clamp(13px, 1.05vw, 16px); font-weight: 300; line-height: 1.7; letter-spacing: .055em; }
.home-live__project-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #2f5d5033; font-size: 12px; letter-spacing: .1em; }
.home-live__project-link span { font-size: 24px; }
body .home-live__project-link.outline-button { align-self: center; }
.home-live__gallery { min-width: 0; align-self: stretch; padding: 115px 0 60px 6%; }
.home-live__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.home-live__viewport::-webkit-scrollbar { display: none; }
.home-live__track { display: flex; gap: 4%; }
.home-live__track::after { content: ''; flex: 0 0 10%; }
.home-live__slide { flex: 0 0 86%; min-width: 0; margin: 0; scroll-snap-align: start; }
.home-live__player { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 45svh; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 65% 20%, #f0ebe3, transparent 75%), #d6d3cd; }
.home-live__slide:nth-child(2) .home-live__player { background: radial-gradient(ellipse at 70% 20%, #e9e5de, transparent 75%), #ccc8c1; }
.home-live__slide:nth-child(3) .home-live__player { background: radial-gradient(ellipse at 65% 20%, #ececea, transparent 75%), #ced1d0; }
.home-live__player::before { content: ''; position: absolute; inset: 20px; border: 1px solid #ffffff66; pointer-events: none; }
.home-live__pending { position: relative; display: grid; place-items: center; width: 100%; padding: 28px; }
.home-live__pending img { width: clamp(160px, 26vw, 360px); max-width: 80%; height: auto; opacity: .5; }
.home-live__player iframe, .home-live__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #d6d3cd; }
.home-live__slide figcaption { position: relative; padding: 24px 28px; background: linear-gradient(115deg, #ffffffb8, #e7e4dd6b 60%, #ffffff85); border: 1px solid #ffffffc4; border-top-color: #fffffff0; box-shadow: inset 0 1px 0 #ffffffb3, 0 8px 24px #484d4608; -webkit-backdrop-filter: blur(24px) saturate(.7); backdrop-filter: blur(24px) saturate(.7); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home-live__slide figcaption { background: #f0eee9; }
}
.home-live__slide figcaption h3 { margin: 0; font-size: 21px; font-weight: 300; letter-spacing: .12em; }
.home-live__navigation { display: flex; align-items: center; gap: 24px; margin-top: 34px; padding-top: 20px; width: 86%; border-top: 1px solid #2f5d5029; }
.home-live__arrows { display: flex; gap: 10px; }
.home-live__arrows button { width: 64px; height: 44px; border: 1px solid #2f5d5066; border-radius: 30px; background: transparent; color: inherit; font: 20px Georgia, serif; cursor: pointer; transition: background .25s; }
.home-live__arrows button:hover:not(:disabled) { background: #2f5d500d; }
.home-live__arrows button:disabled { opacity: .25; cursor: default; }
.home-live__count { margin: 0; font-size: 11px; letter-spacing: .12em; white-space: nowrap; }
.home-live__count span:last-child { opacity: .4; }
.home-live :focus-visible { outline: 1px solid var(--green); outline-offset: 4px; }
.home-live__viewport:focus-visible { outline-offset: -2px; }
@media (max-width: 760px) {
  .home-live { grid-template-columns: 1fr; min-height: 0; }
  .home-live__project { padding: 100px var(--page-edge) 30px; gap: 28px; }
  .home-live__identity { margin: 28px 0 0; }
  .home-live__identity > p:first-child { margin-bottom: 12px; font-size: 11px; }
  .home-page .home-live h2 { font-size: 34px; }
  .home-live__rule, .home-live__intro { display: none; }
  .home-live__project-link { max-width: 220px; padding-bottom: 10px; }
  .home-live__gallery { padding: 36px 0 50px var(--page-edge); }
  .home-live__slide { flex-basis: 90%; }
  .home-live__track::after { flex-basis: 6%; }
  .home-live__pending { padding: 18px; }
  .home-live__player { aspect-ratio: 16 / 10; max-height: none; }
  .home-live__player::before { inset: 10px; }
  .home-live__slide figcaption { padding: 20px; }
  .home-live__slide figcaption h3 { font-size: 18px; }
  .home-live__navigation { width: 90%; gap: 18px; margin-top: 28px; }
  .home-live__arrows button { width: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-live__arrows button { transition: none; }
}

.home-live__play{position:relative;z-index:2;display:grid;justify-items:center;gap:16px;padding:22px;border:0;background:transparent;color:var(--green);font:400 14px/1.6 "Noto Sans TC",sans-serif;letter-spacing:.12em;cursor:pointer}
.home-live__play svg{width:54px;height:54px;transition:transform .2s}
.home-live__play:hover svg{transform:scale(1.08)}
.home-live__play[hidden],.home-live__status[hidden]{display:none}
.home-live__status{position:absolute;z-index:3;left:6%;right:6%;bottom:10%;margin:0;font-size:13px;line-height:1.8;text-align:center;color:var(--green);pointer-events:none}
.home-live__player:has(video) .home-live__status{color:#fff}
.home-live__player video{object-fit:contain;background:#15211b}
@media(max-width:760px){.home-live__status{font-size:11px;bottom:5%}.home-live__play{font-size:12px;gap:8px}.home-live__play svg{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.home-live__play svg{transition:none}}

/* Keep the card under the pointer while dragging; snap after release. */
.home-live__viewport{cursor:grab;user-select:none;-webkit-user-select:none}
.home-live__viewport.is-dragging{scroll-snap-type:none;scroll-behavior:auto}
.home-live__viewport.is-dragging,.home-live__viewport.is-dragging *{cursor:grabbing!important}

.home-live__gallery-heading{margin-bottom:36px}
.home-live__gallery-heading h3{margin:0;font-size:25px;font-weight:300;letter-spacing:.15em}
@media(max-width:760px){.home-live__gallery-heading{margin-bottom:26px}.home-live__gallery-heading h3{font-size:20px}}