@scope (.work-section){

.film-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:0 0 0 2px}
.film-filters[hidden]{display:none}
.subchip{display:inline-flex;align-items:center;gap:7px;border:1px solid #ffffff22;border-radius:999px;padding:9px 14px;background:rgba(14,14,15,.6);color:#b8b8bd;cursor:pointer;font:700 13px/1.4 "HS Sans";transition:color .2s,border-color .2s,background .2s}
.subchip sup{font:700 10px/1 "Poppins";opacity:.65}
.subchip:hover{border-color:#ffffff70;color:#fff}
.subchip[aria-pressed="true"]{color:var(--lime);border-color:#aaff0066;background:#aaff000d}
.subchip:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
@media(max-width:760px){.film-filters{gap:7px;margin-top:12px}.subchip{padding:8px 11px;font-size:12px}}

/* 宏视作品页 v1（2026-11-01）。two.css 为 v20 共享样式原样复制；本文件只放本页样式。 */

/* 页眉：沿用 v20（荧光绿 宏视传媒×光影、四项居中导航），白底页用实色深底 */
.nav{background:rgba(9,9,9,.94);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.mk{display:inline-flex;align-items:center;gap:10px}
.mk::before{content:"";width:28px;height:1px;background:var(--sub)}

/* 灰黑调：只在本页覆盖共享变量，荧光绿仅作点缀 */
:scope{--paper:#0e0e0f;--ink:#ececec;--sub:#8c8c90;--line:#26262a;--wash:#18181a}
:scope{background:#0e0e0f;color:#ececec}

:scope{position:relative;overflow:hidden;background:
  radial-gradient(620px 280px at 4% 260px,rgba(122,232,0,.07),transparent 70%),
  radial-gradient(560px 260px at 98% 140px,rgba(0,229,204,.05),transparent 70%)}

/* 开篇：短标题 + 分类即目录 */
.intro{position:relative;padding:150px 0 132px}
.intro-in{position:relative;z-index:2}
/* 开篇底部拼贴：取本站封面，矮条、压暗、上下渐隐，只烘托标题，不抢作品 */
.mosaic{position:absolute;left:0;right:0;bottom:0;height:300px;z-index:1;display:grid;grid-template-columns:1.3fr 1fr 1.2fr .9fr 1.3fr 1fr 1.1fr;grid-template-rows:1fr 1.15fr;gap:6px;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 42%,#000 72%,transparent)}
.mosaic::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 30% 40%,rgba(14,14,15,.55),rgba(14,14,15,.2))}
.mosaic span{overflow:hidden;background:#161618}
.mosaic img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.8);animation:tile 1.6s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@keyframes tile{from{opacity:0;transform:scale(1.08)}}
.intro-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px}
.intro h2{font-family:"HS Sans";font-weight:700;font-size:120px;line-height:1;letter-spacing:-.02em;color:#f4f4f4;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.intro .lead{font-size:16px;color:var(--sub);margin-bottom:12px}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:56px}
.chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border:1px solid #47474c;border-radius:999px;background:rgba(14,14,15,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#d6d6d8;font:700 15px/1 "HS Sans";cursor:pointer;transition:background .3s,color .3s}
.chip sup{font:700 11px/1 "Poppins";color:var(--sub);vertical-align:0;position:relative;top:-5px}
.chip:hover{border-color:#8c8c90;color:#fff}
.chip[aria-pressed="true"]{background:#ececec;border-color:#ececec;color:#0e0e0f}
.chip[aria-pressed="true"] sup{color:#0e0e0f}
.chip[aria-pressed="true"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px #0e0e0f;margin-right:2px}

/* 作品墙：通栏、细缝，两列等宽，类别内保持原官网顺序 */
.gallery{padding:0 24px 110px}
.row{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:end;margin-bottom:8px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s12{grid-column:span 12}
.card{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.ph{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:#161618;box-shadow:inset 0 0 0 1px #ffffff0d}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .6s}
/* 低清封面：按原尺寸放在深灰画框里，不放大 */
.ph.lo{background:var(--wash)}
.ph.lo img{width:auto;height:auto;max-width:92%;max-height:92%;object-fit:contain}
.ph::after{content:"↗";position:absolute;right:16px;top:16px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--lime);color:#000;font:500 16px/1 "Poppins";opacity:0;transform:scale(.7);transition:opacity .4s,transform .4s}
.card:hover .ph img,.card:focus-visible .ph img{transform:scale(1.03)}
.card:hover .ph::after,.card:focus-visible .ph::after{opacity:1;transform:none}
.cell.rv{transition-delay:var(--d,0s)}

.more-row{display:flex;justify-content:space-between;align-items:center;margin:48px 0 0;padding-top:24px;border-top:1px solid var(--line)}
#more{background:transparent;color:#ececec;border-color:#47474c}
#more:hover{background:var(--lime);border-color:var(--lime);color:#000}
.foot{background:#0a0a0b;color:#c8c8cc}
.tally{font:500 13px/1 "Poppins","HS Sans";color:var(--sub);letter-spacing:.04em}
#more[hidden]{display:none}

/* 详情：深色全屏弹层，长图按原比例纵向滚动 */
html.lock{overflow:hidden}
.viewer{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0b0b0b;color:#fff}
.viewer::backdrop{background:rgba(0,0,0,.6)}
.viewer[open]{display:flex;flex-direction:column}
.v-bar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 24px;border-bottom:1px solid #ffffff22}
.v-meta{min-width:0}
.v-cat{display:inline-flex;align-items:center;gap:8px;font:400 12px/1.4 "HS Sans";color:#ffffffa0}
.v-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.v-meta h2{font:700 22px/1.4 "HS Sans";margin-top:4px}
.v-ctrl{flex:none;display:flex;align-items:center;gap:10px}
.v-count{font:500 13px/1 "Poppins";color:#ffffffa0;margin-right:8px}
.v-btn{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff55;background:transparent;color:#fff;font:400 18px/1 "Poppins";cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.v-btn:hover{background:var(--lime);border-color:var(--lime);color:#000}
.v-:scope{flex:1;overflow-y:auto;padding:40px 24px 80px;outline:none}
.v-body img{display:block;width:auto;max-width:min(100%,1200px);height:auto;margin:0 auto 16px}
.v-film{display:flex;flex-direction:column;align-items:center;gap:28px}
.v-film img{margin:0}
.v-film .pill{background:var(--lime);border-color:var(--lime);color:#000}

@media(prefers-reduced-motion:reduce){.ph img,.ph::after{transition:none}.card:hover .ph img{transform:none}}

@media(max-width:1100px){
  .wrap{width:calc(100% - 64px)}
  .nav .wrap{gap:20px}.menu{gap:20px}
  .intro h2{font-size:96px}
}
@media(max-width:760px){
  .wrap,.nav .wrap,.foot .wrap{width:calc(100% - 40px)}
  .nav .brand{font-size:18px}.menu{display:none}
  .intro{padding:112px 0 28px}
  .intro-row{flex-direction:column;align-items:flex-start;gap:10px}
  .intro h2{font-size:64px}
  .filters{margin-top:32px;gap:8px}
  .chip{height:36px;padding:0 14px;font-size:14px}
  .gallery{padding:0 20px 72px}
  .row{grid-template-columns:1fr;gap:32px;margin-bottom:32px}
  .s3,.s4,.s5,.s6,.s7,.s12{grid-column:auto}
  .more-row{flex-direction:column;align-items:flex-start;gap:16px}
  .v-bar{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px}
  .v-meta h2{font-size:18px}
  .v-:scope{padding:20px 12px 60px}
  .foot .wrap{flex-direction:column;gap:24px}.foot nav{flex-wrap:wrap;justify-content:center;gap:18px}
}

/* 标题只在悬停 / 键盘焦点时出现在图片上，图片下方不再显示文字 */
.hover-title{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:12px;padding:64px 28px 26px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font:700 28px/1.4 "HS Sans";text-align:left;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.card:hover .hover-title,.card:focus-visible .hover-title{opacity:1;transform:none}
@media(max-width:760px){.hover-title{font-size:22px;padding:48px 18px 18px}}
@media(prefers-reduced-motion:reduce){.hover-title{transition:none}}
.hover-title::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--lime)}
@media(prefers-reduced-motion:reduce){.mosaic img{animation:none}}
@media(max-width:760px){
  .intro{padding:112px 0 112px}
  .mosaic{height:200px;grid-template-columns:1.2fr 1fr 1.1fr .9fr}
  .mosaic span:nth-child(n+9){display:none}
  .row{gap:8px;margin-bottom:8px}
  .more-row{margin-top:32px}
}
}
html{scroll-behavior:smooth}html.lock{overflow:hidden}#works{scroll-margin-top:0}.foot{background:#0a0a0b;color:#c8c8cc}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Use actual supplied weights; prevent silent faux-bold on missing glyphs. */
.work-section,.viewer{font-synthesis:none}

.viewer .v-close,.viewer .v-close:hover,#v-close,#v-close:hover{color:#fff;background:#ffffff12}

/* 分类直接展开，触控区域适度放大 */
.filters .chip{height:46px;padding:0 22px;font-size:16px}
.film-filters{gap:10px}
.film-filters .subchip{min-height:44px;padding:11px 18px;font-size:15px}
.film-filters .subchip sup{font-size:12px}
@media(max-width:760px){.filters .chip{height:42px;padding:0 16px;font-size:15px}.film-filters{gap:8px}.film-filters .subchip{min-height:42px;padding:10px 14px;font-size:14px}}