/* Shared desktop, tablet and phone refinements. Keep the original art direction. */
:root { --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
.wrap, .intro-inner, .watch-shell { max-width: calc(100% - max(var(--pad), var(--safe-left)) - max(var(--pad), var(--safe-right))); }
.work > *, .watch-grid > *, .cv-id > *, .contact-grid > *, .process-head > * { min-width: 0; }
.cv-contact, .contact-cards span, .about-work dd { overflow-wrap: anywhere; }
.cv-photo img { filter: none; }
.site-header { padding-left: max(var(--pad), var(--safe-left), calc((100vw - var(--maxw)) / 2)); padding-right: max(var(--pad), var(--safe-right), calc((100vw - var(--maxw)) / 2)); }
.drawer { overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.toast { bottom: max(24px, env(safe-area-inset-bottom)); overflow-wrap: anywhere; }
.footer-links { flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.cp:focus-within .cp-controls { opacity: 1; transform: none; pointer-events: auto; }
.cp:focus-within .cp-top { opacity: 1; transform: none; }
.cp-menu { max-height: min(260px, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.cp-menu button { min-height: 44px; align-items: center; }
.cp-btn { flex-shrink: 0; }
.cp.is-compact .cp-dm-input, .cp.is-compact .cp-btn-label { display: none; }
.cp.is-compact .cp-row { gap: 0; height: 44px; }
.cp.is-compact .cp-btn { min-width: 44px; height: 44px; padding: 0 8px; font-size: 12px; }
.cp.is-compact .cp-btn svg { width: 20px; height: 20px; }
.cp.is-compact .cp-vol { display: flex; }
.cp.is-compact .cp-vol input { display: none; }
.cp.is-compact .cp-time { font-size: 11px; padding: 0 4px; letter-spacing: 0; }
.cp.is-compact .cp-progress { height: 32px; }
.cp.is-compact .cp-top { gap: 8px; padding: 12px; }
.cp.is-compact .cp-title { min-width: 0; font-size: 12px; }
.cp.is-compact .cp-title-text { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp.is-compact .cp-quality { padding: 3px 5px; }
.cp.is-compact .cp-menu-wrap { position: static; }
.cp.is-compact .cp-menu { left: 8px; right: 8px; bottom: 84px; padding: 4px; min-width: 0; }
.cp.is-compact .cp-menu.is-open { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cp.is-compact .cp-menu button { justify-content: center; padding: 4px 0; gap: 0; font-size: 12px; }
.cp.is-compact .cp-resume, .cp.is-compact .cp-nextup { left: 8px; right: 8px; bottom: 86px; gap: 6px; padding: 6px 8px; flex-wrap: wrap; }
.cp.is-compact .cp-resume button, .cp.is-compact .cp-nextup button { min-height: 44px; }
/* Under 480px, keep controls below the picture so they do not cover subtitles. */
.cp.is-narrow:not(:fullscreen) .cp-stage { aspect-ratio: auto; padding-bottom: 84px; }
.cp.is-narrow:not(:fullscreen) video { height: auto; aspect-ratio: 16 / 9; }
.cp.is-narrow:not(:fullscreen) .cp-big, .cp.is-narrow:not(:fullscreen) .cp-buffer-spin, .cp.is-narrow:not(:fullscreen) .cp-shade { bottom: 84px; }
.cp.is-narrow .cp-danmaku { bottom: 84px; }
.cp.is-narrow .cp-controls { padding: 0 4px 6px; opacity: 1; transform: none; pointer-events: auto; background: #100f0d; }
.cp.is-narrow .cp-next, .cp.is-narrow .cp-theater { display: none; }
.cp.is-narrow .cp-time span, .cp.is-narrow .cp-time i { display: none; }
.cp.is-narrow .cp-big small { display: none; }
.cp.is-narrow .cp-title-sub { font-size: 10px; letter-spacing: .04em; }
.cp:fullscreen .cp-controls { padding-bottom: max(10px, env(safe-area-inset-bottom)); padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
.inline-close { min-height: 44px; z-index: 8; }
.work-cover:has(.inline-slot:not([hidden])) { aspect-ratio: auto; }
.inline-slot.cp .cp-stage { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.inline-slot.cp:fullscreen .cp-stage { height: 100%; aspect-ratio: auto; }
.inline-slot .cp-top { padding-right: 110px; }

@media (min-width: 981px) and (max-width: 1180px) {
  .site-header { gap: 14px; }
  .brand-text small { letter-spacing: .14em; }
  .nav a { padding-inline: 8px; }
  .watch-page .nav a em { display: none; }
}
@media (max-width: 980px) {
  .site-header, .site-header.is-stuck { height: 70px; gap: 12px; }
  .menu-toggle, .back-link { height: 44px; min-width: 44px; font-size: 12px; }
  .drawer a { font-size: 26px; }
  .drawer .drawer-foot { gap: 14px; flex-wrap: wrap; padding-top: 24px; }
  .intro-head { margin-bottom: 0; gap: 16px; }
  .process-head { flex-wrap: wrap; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-actions { justify-content: flex-start; }
  .cv-facts dd { flex-wrap: wrap; }
  .cv-facts dd span { flex-basis: 100%; }
  .stage-bar { gap: 16px; }
  .ep-nav button { min-height: 44px; }
  .switch { min-height: 44px; }
  .keys { display: none; }
  .ep-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ep-meta { font-size: 12px; }
}
@media (max-width: 760px) {
  :root { --pad: 18px; }
  html { scroll-padding-top: 82px; }
  .brand { gap: 10px; min-width: 0; }
  .brand-text small { font-size: 8px; letter-spacing: .16em; }
  .brand .seal { width: 36px; height: 36px; }
  .intro-inner { padding: 92px 0 32px; gap: 20px; }
  .intro-head { padding-bottom: 18px; }
  .intro-head h2 { font-size: clamp(30px, 8vw, 40px); }
  .section-aside { font-size: 13px; line-height: 1.9; }
  .cv-card { padding: 18px; box-shadow: 7px 7px 0 rgba(239,231,216,.12); }
  .cv-id { gap: 16px; align-items: center; }
  .cv-role { font-size: 12px; line-height: 1.7; letter-spacing: 0; }
  .cv-line { font-size: 14px; line-height: 1.9; }
  .cv-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-block: 16px; }
  .cv-facts dt { font-size: 11px; letter-spacing: .04em; }
  .cv-facts dd { gap: 4px; }
  .cv-facts dd b { font-size: 28px; }
  .cv-facts dd span { font-size: 11px; line-height: 1.7; }
  .cv-contact { display: grid; grid-template-columns: 1fr; gap: 0; font-size: 13px; }
  .cv-contact a { display: flex; align-items: center; min-height: 44px; width: fit-content; }
  .cv-contact > span { line-height: 1.8; padding-top: 4px; }
  .cv-timeline .rt { padding-block: 14px; gap: 6px; }
  .cv-timeline .rt time { font-size: 12px; }
  .cv-timeline .rt h4 { display: block; font-size: 16px; line-height: 1.7; }
  .cv-timeline .rt p { display: block; font-size: 13px; line-height: 1.9; margin-top: 4px; }
  .cv-timeline .rt p::before { content: none; }
  .cv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cv-actions .btn:first-child { grid-column: 1 / -1; }
  .cv-actions .btn { min-height: 48px; font-size: 13px; padding-inline: 10px; gap: 10px; }
  .work-media { padding: 0; }
  .work-info h3 { font-size: clamp(23px, 6.4vw, 32px); line-height: 1.5; }
  .work-desc, .craft-card p, .about-work p { font-size: 14px; line-height: 1.9; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  .specs > div { flex-wrap: wrap; gap: 4px 10px; }
  .specs dt, .specs dd { font-size: 12px; }
  .cover-bottom { left: 12px; right: 12px; bottom: 12px; padding: 0; gap: 10px; }
  .cover-bottom > span:first-child { min-width: 0; }
  .cover-bottom strong { font-size: clamp(14px, 4vw, 22px); line-height: 1.5; }
  .cover-bottom small { font-size: 10px; letter-spacing: .04em; }
  .play-orb { flex-shrink: 0; }
  .inline-close { top: 6px; right: 6px; padding-inline: 8px; font-size: 11px; }
  .inline-slot .cp-top { padding-right: 112px; }
  .work-actions .btn { min-height: 48px; justify-content: center; font-size: 13px; }
  .works-note { font-size: 12px; line-height: 1.9; }
  .process-head h3 { font-size: 22px; line-height: 1.5; }
  .process li { font-size: 12px; }
  .contact h2 { font-size: clamp(30px, 8.3vw, 48px); line-height: 1.35; }
  .contact-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .contact-actions .btn { justify-content: center; gap: 10px; }
  .contact-actions .btn:first-child { grid-column: 1 / -1; }
  .contact-cards span { font-size: 19px; }
  .footer-meta { font-size: 11px; }
  .watch-shell { padding-top: 86px; }
  .crumbs { flex-wrap: wrap; font-size: 12px; }
  .watch-head { padding-bottom: 18px; margin-bottom: 18px; }
  .watch-head h1 { font-size: clamp(26px, 7vw, 36px); line-height: 1.5; }
  .watch-side { margin-top: 14px; }
  .watch-note { font-size: 12px; }
  .creator-chip { flex-wrap: wrap; }
  .stage-bar { display: flex; align-items: center; flex-wrap: wrap; padding: 14px 12px; gap: 12px; }
  .ep-nav { margin: 0; display: flex; gap: 8px; flex: 1 1 auto; }
  .ep-nav button { flex: 1; padding-inline: 8px; font-size: 12px; }
  .stage-options { padding: 0 12px 10px; }
  .switch { font-size: 13px; }
  .ep-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-meta { font-size: 12px; }
  .about-work { padding: 18px; }
  .about-work dl > div { font-size: 13px; gap: 12px; }
}
@media (max-width: 360px) {
  :root { --pad: 14px; }
  .brand-text small { display: none; }
  .cv-card { padding: 14px; }
  .cv-facts { gap: 6px; }
  .cv-facts dd b { font-size: 25px; }
  .cv-facts dd i { font-size: 11px; }
  .cv-facts dd span { font-size: 10px; }
  .work-actions { gap: 10px; }
  .footer-links { gap: 16px; }
}
@media (hover: none), (pointer: coarse) {
  .cp-btn { min-width: 44px; height: 44px; }
  .cp-row { height: 44px; }
  .cp-dm-input, .cp-vol input, .cp-theater { display: none; }
  .cp-vol { display: flex; }
  .cp-progress { height: 32px; }
  .cp-knob { opacity: 1; transform: scale(1); }
  .works-band::before { background-attachment: scroll; }
  .marquee-track { animation: none; }
  body::after { display: none; }
}