/* Mobile visitors arrive at the films, with a player that stays beside their selection. */
.mobile-only { display: none; }
.mobile-only[hidden] { display: none !important; }
html.mobile-portfolio { scroll-padding-top: 16px; }
.mobile-portfolio body { background: #171a19; font-family: 'Microsoft YaHei', 'Noto Sans SC', sans-serif; overflow-x: clip; }
.mobile-portfolio #journey,
.mobile-portfolio .static-story,
.mobile-portfolio .chapter-controls,
.mobile-portfolio #stop-tour,
.mobile-portfolio .story-bridge,
.mobile-portfolio .afterworks-split,
.mobile-portfolio header nav,
.mobile-portfolio header .contact-link,
.mobile-portfolio .desktop-only { display: none !important; }
.mobile-portfolio .mobile-only { display: block; }
.mobile-portfolio header { position: relative; inset: auto; height: 64px; padding: max(16px, env(safe-area-inset-top)) 20px 16px; background: #171a19; border-bottom: 1px solid #d5b77926; }
.mobile-portfolio .brand { font-size: 23px; letter-spacing: -1px; }
.mobile-portfolio .brand small { display: none; }
.mobile-portfolio .mobile-header-label { font-size: 11px; letter-spacing: 2px; color: #b9ad96; }
html.mobile-portfolio #works { margin: 0; padding: 26px 20px 36px; min-height: 0; opacity: 1 !important; transform: none !important; pointer-events: auto; overflow: visible; border: 0; will-change: auto; background: #171a19 !important; }
.mobile-portfolio #works::after { display: none; }
.mobile-portfolio #works::before { opacity: .12; }
.mobile-portfolio #record-room > .eyebrow { color: #b99c68; font-size: 10px; letter-spacing: 2px; }
.mobile-portfolio .record-heading { display: block; margin: 12px 0 22px; }
.mobile-portfolio .record-heading h2 { font-size: clamp(26px, 6.8vw, 36px); font-weight: 600; line-height: 1.35; letter-spacing: -1px; }
.mobile-portfolio .record-heading p { margin: 9px 0 0; color: #b9ad96; font-size: 13px; line-height: 1.7; }
.mobile-portfolio .media-bench { display: block; }
.mobile-portfolio .tv-column { position: sticky; top: 0; z-index: 25; margin: 0 -4px; padding: 8px 4px 12px; background: #171a19; border-bottom: 1px solid #d5b77926; }
.mobile-portfolio .device-stack { max-width: 460px; margin: 0 auto; }
.mobile-portfolio .tv-column .disc-player { display: block; width: 76%; margin: 0 auto -4.2%; }
.mobile-portfolio .television > img { display: block; }
.mobile-portfolio .television { width: 100%; aspect-ratio: 1619/971; }
.mobile-portfolio .tv-screen { position: absolute; left: 12.97%; top: 16.79%; width: 64.48%; height: 59.22%; border-radius: 5% / 10%; box-shadow: inset 0 0 20px #0008; }
.mobile-portfolio .tv-screen::after,
.mobile-portfolio .screen-tuning::before { display: none; }
.mobile-portfolio .tv-idle,
.mobile-portfolio .tv-idle.has-story-preview { padding: 12px; background: radial-gradient(ellipse at 25% 30%, #34382c, #0c100e 80%); color: #f0dfbf; text-shadow: none; }
.mobile-portfolio .tv-channel { font: 8px 'Microsoft YaHei', sans-serif; color: #d5b779; letter-spacing: 1px; margin-bottom: 8px; }
.mobile-portfolio .tv-idle strong { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.mobile-portfolio .tv-idle p { margin: 6px 0 0; color: #b9ad96; font-size: 10px; }
.mobile-portfolio .tv-play { width: 48px; height: 48px; color: #f0dfbf; background: #171a19e8; border-color: #d5b779; font-size: 20px; }
.mobile-portfolio .tv-caption { padding: 6px 0 0; margin: 0 !important; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; line-height: 1.5; }
.mobile-portfolio .tv-caption > span { display: none; }
.mobile-portfolio .tv-caption strong { display: block; flex: 1; min-width: 0; max-width: none; color: #f0dfbf; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-portfolio .mobile-fullscreen { flex-shrink: 0; padding: 0 10px; min-height: 44px; border: 1px solid #d5b77955; border-radius: 5px; background: transparent; color: #d5b779; font-size: 11px; }
.mobile-portfolio .tv-column .player-line { justify-content: flex-start; margin: 5px 0 0; min-height: 18px; font-size: 11px; color: #b9ad96; }
.mobile-portfolio .record-catalog { padding-top: 20px; }
.mobile-portfolio .mobile-catalog-heading { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; }
.mobile-portfolio .mobile-catalog-heading strong { font-size: 17px; font-weight: 500; color: #f0dfbf; }
.mobile-portfolio .mobile-catalog-heading span { font-size: 11px; color: #b9ad96; }
.mobile-portfolio .record-categories { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0 0 16px; }
.mobile-portfolio .record-categories button { min-height: 44px; padding: 9px 12px; border: 1px solid #d5b77930; border-radius: 7px; background: #20251f; color: #bfb6a4; font-size: 12px; }
.mobile-portfolio .record-categories button[aria-pressed=true] { background: #d5b779; border-color: #d5b779; color: #171a19; }
.mobile-portfolio .record-categories small { vertical-align: baseline; font-size: 10px; margin-left: 5px; }
.mobile-portfolio .record-list,
.mobile-portfolio .record-list[data-count='1'] { display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 0; perspective: none; }
.mobile-portfolio .record-item,
.mobile-portfolio .record-item:nth-child(even),
.mobile-portfolio .record-list[data-count='1'] .record-item { display: grid; grid-template-columns: 64px minmax(0,1fr) 36px; align-items: center; gap: 14px; width: 100%; min-height: 94px; padding: 14px 0; border-radius: 0; border: 0; border-bottom: 1px solid #d5b77926; text-align: left; transform: none; transition: none; isolation: auto; }
.mobile-portfolio .record-item[aria-pressed=true] { background: #d5b7790d; }
.mobile-portfolio .record-icon.disc-art,
.mobile-portfolio .record-list[data-count='1'] .disc-art { width: 64px; height: 64px; max-width: none; transform: none !important; box-shadow: inset 0 0 0 1px #d5b77999, 0 5px 8px #0005; transition: none; }
.mobile-portfolio .record-item[aria-pressed=true] .disc-art { box-shadow: 0 0 0 2px #d5b779; }
.mobile-portfolio .disc-hub { border-width: 3px; }
.mobile-portfolio .disc-edition { display: none; }
.mobile-portfolio .flying-disc .record-icon.disc-art { width: 132px; height: 132px; box-shadow: 0 5px 8px #0005; }
.mobile-portfolio .disc-feed .record-icon.disc-art { width: 100%; height: 100%; box-shadow: none; }
.mobile-portfolio .record-name { padding: 0; }
.mobile-portfolio .record-name strong,
.mobile-portfolio .record-list[data-count='1'] .record-name strong { font-size: 14px; font-weight: 500; line-height: 1.55; min-height: 0; color: #f0dfbf; }
.mobile-portfolio .record-name small { font-size: 11px; color: #b9ad96; margin-top: 6px; line-height: 1.5; }
.record-action { display: none; }
.mobile-portfolio .record-action { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #d5b77966; border-radius: 50%; color: #d5b779; }
.mobile-portfolio .record-action svg { width: 15px; height: 15px; fill: currentColor; }
.mobile-portfolio .record-item[aria-pressed=true] .record-action { background: #d5b779; color: #171a19; }
.mobile-portfolio .record-item:focus-visible { border-radius: 5px; outline-offset: 3px; outline: 2px solid #d5b779; }
.mobile-portfolio .record-pager { display: none; }
.mobile-portfolio .record-note { margin: 22px 0 0; text-align: left; color: #b9ad96; }
.mobile-portfolio footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 22px 20px max(22px, env(safe-area-inset-bottom)); font-size: 10px; color: #b9ad96; background: #171a19; border-top: 1px solid #d5b77926; }
.mobile-portfolio footer > span:nth-child(2) { display: none; }
@media (max-height: 500px) {
  .mobile-portfolio header { height: 48px; padding-top: 10px; padding-bottom: 10px; }
  html.mobile-portfolio #works { padding-top: 14px; }
  .mobile-portfolio .record-heading { margin: 8px 0 10px; }
  .mobile-portfolio .record-heading h2 { font-size: 22px; }
  .mobile-portfolio .record-heading p { display: none; }
  .mobile-portfolio .tv-column { display: grid; grid-template-columns: minmax(0, 250px) minmax(100px, 1fr); column-gap: 20px; align-items: center; }
  .mobile-portfolio .device-stack { grid-row: span 2; width: 100%; }
  .mobile-portfolio .tv-caption { align-self: end; }
  .mobile-portfolio .player-line { align-self: start; }
}