/* Portfolio refinements shared by the category and individual case pages. */
.case-pages .cover-media:after{background:linear-gradient(90deg,rgba(8,7,6,.48),transparent 70%),linear-gradient(0deg,rgba(8,7,6,.45),transparent 60%)}
.case-pages .category-cover:hover .cover-media img{filter:brightness(.98) saturate(1.02)}
.case-pages .work-media img{filter:brightness(1) saturate(1.01)}
.case-pages .work-media:after{background:linear-gradient(0deg,rgba(7,6,5,.12),transparent 24%)}
.case-index{--case-nav-height:82px;--case-rail-gap:20px;--case-rail-height:62px;--case-paper:#f4f0e9}
.case-pages.detail-mode .filterbar{position:fixed;top:calc(var(--case-nav-height) + var(--case-rail-gap));left:50%;right:auto;transform:translateX(-50%);margin:0;padding:8px;max-width:calc(100% - 32px);border:1px solid #4c433522;border-radius:32px;background:#f4f0e9f5;backdrop-filter:blur(18px);gap:4px;box-shadow:0 4px 20px #3d332a0a}
.case-pages.detail-mode .filter{color:#51493f;background:transparent;border-color:transparent;font-size:13px;min-height:44px;padding:10px 18px}
.case-pages.detail-mode .filter:hover{background:#e5dfd4;color:#25221d;box-shadow:none;border-color:transparent}
.case-pages.detail-mode .filter.active{background:#34352e;color:#fff;box-shadow:none;border-color:#34352e}
.case-pages .portal-back,.case-pages .portal-category{top:184px;color:#494137;background:#f7f4edeb;border-color:#5f53462b;font-size:10px}
.case-pages .gallery-intro{font-size:11px;line-height:1.8;bottom:24px;max-width:200px}
.case-pages .work-copy>div{min-width:0}
.case-pages .work-copy h2{overflow-wrap:anywhere;text-wrap:pretty}
.case-pages .work-title-name{display:block}
.case-pages .work-title-type{display:block;font:400 15px/1.6 'DM Sans','Noto Sans TC',sans-serif;letter-spacing:.03em;margin-top:7px;color:#5a5248}
.case-pages .work-film-cue{position:absolute;bottom:18px;left:18px;z-index:4;padding:9px 14px;background:#f8f5eeed;border:1px solid #fff8;border-radius:24px;color:#332e27;font:400 12px/1.5 'DM Sans','Noto Sans TC',sans-serif;letter-spacing:.06em}
.case-pages .hero-project-name{font:400 15px/1.6 'DM Sans','Noto Sans TC',sans-serif;color:#605949;letter-spacing:.12em;margin:24px 0 8px}
.case-pages .hero-project-name+h1{margin-top:6px}
.case-pages .ex-index{font-size:12px;color:#5e594e;gap:24px}
.case-pages .ex-index a{display:block;padding:9px 0;min-height:44px;line-height:26px}
.case-pages .ex-plate,.case-pages .ex-intro{scroll-margin-top:100px}
.case-pages .case-actions-toggle{display:none}
.case-pages:has(#art-viewer[open]) .quick-actions{visibility:hidden;pointer-events:none}
@media(max-width:1024px){
 .case-pages.detail-mode .filterbar{position:fixed;left:50%;right:auto;transform:translateX(-50%);margin:0;width:max-content}
 .case-index.detail-mode #app{padding-top:calc(var(--case-nav-height) + var(--case-rail-gap) + var(--case-rail-height) + 20px)}
 .case-pages.detail-mode .work-list{padding-top:0}
 .case-pages.detail-mode .work-portal-stage{position:relative!important;display:block!important;height:auto!important;min-height:0;overflow:visible!important;perspective:none;scroll-snap-type:none;touch-action:auto;padding-top:64px!important;background:var(--case-paper)!important}
 .case-index.detail-mode .work-band{position:relative!important;display:block!important;grid-row:auto!important;left:auto!important;top:auto!important;width:100%!important;visibility:visible!important;opacity:1!important;filter:none!important;transform:none!important;scroll-snap-align:none!important}
 .case-index.detail-mode .work-copy{background:var(--case-paper)}
 .case-pages .portal-back,.case-pages .portal-category{top:14px}
}
@media(max-width:760px){
 .case-pages .cover-media:after{background:linear-gradient(0deg,rgba(8,7,6,.12),transparent 44%)}
 .case-pages .work-copy{grid-template-columns:minmax(0,1fr) 44px;gap:14px;padding:18px 20px 30px}
 .case-pages .work-copy h2{font-size:25px;line-height:1.45}
 .case-pages .work-title-type{font-size:14px;margin-top:5px}
 .case-pages .work-copy p{font-size:10px;line-height:1.7;letter-spacing:.07em}
 .case-pages.detail-mode .filterbar{max-width:calc(100% - 24px);width:calc(100% - 24px);padding:5px;gap:2px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
 .case-pages.detail-mode .filter{flex:1 0 auto;font-size:12px;padding:10px 11px}
 .case-pages .portal-category{font-size:8px;padding:9px 11px;right:14px}
 .case-pages .portal-back{padding:9px 11px;left:14px}
 .case-pages .hero-project-name{font-size:14px;margin-top:22px}
 .case-pages .ex-index{font-size:12px;padding-top:10px;padding-bottom:10px}
 .case-pages .ex-plate,.case-pages .ex-intro{scroll-margin-top:82px}
 /* Keep LINE and a single disclosure at the lower edge; other actions expand on demand. */
 .case-pages .quick-actions{flex-direction:row;gap:8px;right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
 .case-pages .quick-actions .case-actions-extra{display:none}
 .case-pages .quick-actions .case-actions-toggle{display:flex;order:2;font-size:11px;width:44px;height:44px}
 .case-pages .quick-actions [data-action-discuss]{width:48px;height:48px}
 .case-pages .quick-actions.is-expanded .case-actions-extra{display:flex}
 .case-pages .quick-actions.is-expanded{padding:10px;background:#181b1f66;border:1px solid #ffffff61;border-radius:38px;box-shadow:inset 0 1px 0 #ffffff45,0 6px 25px #0002;backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);max-width:calc(100vw - 28px);flex-wrap:wrap;justify-content:flex-end}
 .case-pages.case-video-visible .quick-actions{opacity:0;visibility:hidden;pointer-events:none}
}
@media(max-width:700px){.case-index{--case-nav-height:80px}}
@media(max-width:760px){.case-index{--case-rail-height:56px}}
@media(prefers-reduced-motion:reduce){.case-pages .quick-actions{transition:none}}
/* Title spans are text; only the trailing arrow uses the original circular control. */
.case-pages .work-band .work-copy h2 span{display:block;width:auto;height:auto;border:0;border-radius:0;background:none;color:inherit;transform:none;transition:none}
.case-pages .work-copy h2 .work-title-type{font:400 15px/1.6 'DM Sans','Noto Sans TC',sans-serif;color:#5a5248}
.case-pages .portal-back,.case-pages .portal-category{z-index:300}
@media(max-width:760px){.case-pages .work-copy h2 .work-title-type{font-size:14px}}
.case-pages .work-copy h2 .work-title-name{font:inherit;letter-spacing:inherit}
.case-pages.detail-mode{background:var(--case-paper);--ink:#34352e;--muted:#6e675d;--line:#51493f24}
.case-index.detail-mode .work-list,.case-index.detail-mode .cta,.case-index.detail-mode .footer{background:var(--case-paper)}
.case-index.detail-mode .footer{color:#6e675d}
.case-index.detail-mode .cta small{color:#71604c}
.case-index.detail-mode .cta a{color:#51473a;border-color:#8f806d}
.case-index.detail-mode .cta a:hover{background:#34352e;color:#fff}




/* Case navigation occupies its own black band from the first paint. */
.case-index .vsl-nav,.case-index .vsl-nav.is-scrolled{background:#0b0a09;color:#dedede;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.case-index .vsl-nav:before{display:none;}
.case-index:not(.detail-mode){padding-top:var(--case-nav-height);}
.case-index .category-cover{scroll-margin-top:var(--case-nav-height);}
/* Keep text geometry stable when entering or leaving a cover. */
.case-index .cover-copy{grid-template-columns:minmax(0,1fr) auto;}
.case-index .cover-copy>div{min-width:0;}
.case-index .cover-copy h2,.case-index .category-cover:hover .cover-copy h2{letter-spacing:normal;transform:none;transition:none;}
.case-index .cover-subtitle,.case-index .category-cover:hover .cover-subtitle{letter-spacing:.04em;transform:none;transition:color .25s;}
.case-index .work-copy h2,.case-index .work-band:hover .work-copy h2{letter-spacing:normal;transition:none;}

/* The case gallery has no desktop floating side navigation. */
@media(min-width:761px){.case-index .quick-actions{display:none!important;}}

/* Give mobile descriptions the full card width instead of sharing an arrow column. */
@media(max-width:760px){
 .case-index .cover-copy{display:block;position:relative;padding:20px 18px 28px;}
 .case-index .cover-copy h2{padding-right:58px;}
 .case-index .cover-copy .cover-arrow{position:absolute;right:18px;top:46px;}
 .case-index .cover-subtitle{max-width:none;width:100%;margin-top:14px;font-size:13px;line-height:1.7;}
}

/* Balance mobile descriptions and keep gallery content clear of floating controls. */
.case-index .quick-actions{display:none!important;}
@media(max-width:760px){
 .case-index .cover-subtitle{text-wrap:pretty;}
 .case-index .cover-subtitle .cover-line{display:block;}
 .case-index .cover-copy .cover-arrow,.case-index .category-cover:hover .cover-arrow{width:24px;height:32px;right:20px;top:47px;border:0;border-radius:0;background:transparent;color:#d8d2c8;font-size:23px;transform:none;transition:color .2s;}
 .case-index .cover-copy h2{padding-right:42px;}
}

/* Black gallery background for portfolio category pages, on desktop and mobile. */
.case-index.detail-mode{--case-paper:#0b0a09;--ink:#f1eee8;--muted:#b8b1a7;--line:#ffffff24;background:#0b0a09;color:#f1eee8;}
.case-index.detail-mode .work-list,.case-index.detail-mode .work-portal-stage,.case-index.detail-mode .work-copy,.case-index.detail-mode .cta{background:#0b0a09;}
.case-index.detail-mode .gallery-space{background:#0b0a09;}
.case-index.detail-mode .gallery-space:before,.case-index.detail-mode .gallery-space:after,.case-index.detail-mode .portal-webgl,.case-index.detail-mode .portal-vignette{display:none!important;}
.case-index.detail-mode .work-copy,.case-index.detail-mode .work-copy h2{color:#f1eee8;}
.case-index.detail-mode .work-copy h2 .work-title-type{color:#c8c1b6;}
.case-index.detail-mode .work-copy p{color:#b8b1a7;}
.case-index.detail-mode .work-copy>span{color:#f1eee8;border-color:#ffffff70;}
.case-index.detail-mode .work-band:hover .work-copy>span{background:#f1eee8;color:#171411;}
.case-index.detail-mode .portal-back,.case-index.detail-mode .portal-category{color:#e6e0d6;background:#181613eb;border-color:#ffffff30;}
.case-index.detail-mode .gallery-intro,.case-index.detail-mode .portal-hint,.case-index.detail-mode .coverflow-status{color:#b8b1a7;}
.case-index.detail-mode .coverflow-status strong{color:#f1eee8;}
.case-index.detail-mode .coverflow-status:before,.case-index.detail-mode .coverflow-status:after,.case-index.detail-mode .portal-rail{background:#ffffff30;}
.case-index.detail-mode .portal-rail span{background:#e6e0d6;}
.case-index.detail-mode .portal-hint:after{background:linear-gradient(transparent,#ffffff70,transparent);}
.case-index.detail-mode .cta small{color:#c8a889;}
.case-index.detail-mode .cta a{color:#f1eee8;border-color:#ffffff70;}
.case-index.detail-mode .cta a:hover{background:#f1eee8;color:#171411;}

/* Override legacy narrow-screen colors that were declared important in the page. */
.case-index.detail-mode .work-list,.case-index.detail-mode .work-portal-stage,.case-index.detail-mode .work-copy{background:#0b0a09!important;}
.case-index.detail-mode .work-band,.case-index.detail-mode .work-copy{color:#f1eee8!important;}
.case-index.detail-mode .work-copy p{color:#b8b1a7!important;}
.case-index.detail-mode .work-copy>span{border-color:#ffffff70!important;}

/* Individual works share the portfolio's solid black, fixed header. */
.case-pages{--case-nav-height:82px;}
.case-pages .vsl-nav,.case-pages .vsl-nav.is-scrolled{--nav-text:#dedede;--nav-active:#fff;background:#0b0a09;color:#dedede;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.case-pages .vsl-nav:before{display:none;}
.case-pages:not(.case-index){padding-top:var(--case-nav-height);}
@media(max-width:700px){.case-pages{--case-nav-height:80px;}}

/* Keep the recommendation heading secondary to the featured work. */
.case-pages .ex-next h2{font-size:32px;line-height:1.45;margin:18px 0 24px;}
@media(max-width:700px){.case-pages .ex-next h2{font-size:24px;margin:16px 0 22px;}}

/* Compact project information; native portrait framing for short films. */
.case-pages .ex-intro{grid-template-columns:160px minmax(0,1fr);gap:clamp(32px,5vw,80px);padding:56px 0;align-items:start;}
.case-pages .ex-intro h2{font-size:24px;line-height:1.5;margin:0;letter-spacing:.02em;}
.case-pages .ex-intro .project-overview{font:400 15px/1.95 var(--sans);color:#5a574e;max-width:720px;margin:0;white-space:normal;text-wrap:pretty;}
.case-pages .ex-intro .ex-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2fr);gap:20px;margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line);max-width:850px;font-size:12px;line-height:1.8;}
.case-pages .ex-meta dt{font-size:10px;letter-spacing:.04em;}
.case-pages .ex-plate.is-portrait .plate-layout{grid-template-columns:minmax(0,360px) minmax(0,320px);gap:clamp(32px,6vw,90px);max-width:820px;margin-inline:auto;align-items:center;}
.case-pages .ex-plate.is-portrait .plate-art{grid-column:1;grid-row:1;width:min(100%,calc(72svh * 9 / 16));justify-self:center;}
.case-pages .ex-plate.is-portrait .plate-copy{grid-column:2;grid-row:1;}
.case-pages .ex-plate.is-portrait iframe,.case-pages .ex-plate.is-portrait video{aspect-ratio:9/16;height:auto;width:100%;display:block;background:#0b0a09;}
@media(max-width:700px){
 .case-pages .ex-intro{display:block;padding:36px 0;}
 .case-pages .ex-intro h2{font-size:21px;margin:0 0 18px;}
 .case-pages .ex-intro .project-overview{font-size:14px;line-height:1.9;}
 .case-pages .ex-intro .ex-meta{grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:22px;padding-top:20px;}
 .case-pages .ex-plate.is-portrait .plate-layout{display:flex;gap:24px;align-items:stretch;}
 .case-pages .ex-plate.is-portrait .plate-art{width:min(100%,calc(70svh * 9 / 16));margin-inline:auto;}
}

/* Short films stay as optional text links below the main film. */
.case-pages .short-film-links{display:grid;gap:0;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font:400 13px/1.7 var(--sans);}
.case-pages .short-film-links>span{font-size:11px;color:var(--muted);margin-bottom:8px;letter-spacing:.06em;}
.case-pages .short-film-links a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:44px;padding:10px 0;color:var(--ink);text-decoration:underline;text-decoration-color:#a59e8860;text-underline-offset:5px;}
.case-pages .short-film-links a:hover{color:var(--ochre);text-decoration-color:currentColor;}
.case-pages .short-film-links a>span{flex:none;text-decoration:none;}

/* An aerial story pairs readable copy with the original vertical Reel. */
.case-pages .case-reel-story{margin:0 7.5%;padding:72px 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(40px,7vw,110px);align-items:center;border-bottom:1px solid var(--line);}
.case-pages .case-reel-copy{max-width:560px;}
.case-pages .case-reel-copy h2{font:400 28px/1.65 var(--serif);margin:24px 0;letter-spacing:.015em;text-wrap:pretty;}
.case-pages .case-reel-copy>p:not(.ex-kicker){font:400 15px/2 var(--sans);color:#5a574e;margin:0 0 18px;text-wrap:pretty;}
.case-pages .case-reel-copy .case-reel-lead{color:var(--ink);}
.case-pages .case-reel-proof{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);}
.case-pages .case-reel-proof strong{font:400 17px/1.6 var(--sans);color:var(--ink);}
.case-pages .case-reel-proof>span{font:400 10px/1.7 var(--sans);color:var(--muted);}
.case-pages .case-reel-media{margin:0;min-width:0;}
.case-pages .case-reel-media iframe{width:100%;height:740px;display:block;border:0;background:#fff;}
.case-pages .case-reel-media figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:16px;font:400 11px/1.7 var(--sans);color:var(--muted);}
.case-pages .case-reel-media a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;}
@media(max-width:700px){
 .case-pages .case-reel-story{margin:0 7%;padding:40px 0;grid-template-columns:minmax(0,1fr);gap:28px;}
 .case-pages .case-reel-copy h2{font-size:24px;margin:18px 0;}
 .case-pages .case-reel-copy>p:not(.ex-kicker){font-size:14px;line-height:1.9;}
 .case-pages .case-reel-media{width:100%;max-width:380px;justify-self:center;}
 .case-pages .case-reel-media iframe{height:680px;}
}

/* Only the Instagram presentation is dark; the work page retains its paper canvas. */
.case-pages .case-reel-media{background:#0b0a09;color:#c8c1b6;padding:16px;width:100%;max-width:360px;justify-self:end;}
.case-pages .case-reel-viewport{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:#000;}
.case-pages .case-reel-viewport iframe{position:absolute;display:block;width:142.222222%;max-width:none;height:calc(100% + 280px);left:-21.111111%;top:-54px;border:0;background:#000;color-scheme:dark;}
.case-pages .case-reel-media figcaption{color:#c8c1b6;line-height:1.8;font-size:11px;}
.case-pages .case-reel-media a{color:#eee8de;}
@media(max-width:700px){.case-pages .case-reel-media{justify-self:center;padding:12px;}}

/* Give the mobile story and Instagram film separate breathing space. */
@media(max-width:700px){.case-pages .case-reel-story{row-gap:48px;}}

/* Recommendations are an image-led grid, without padded image canvases. */
.case-pages .ex-next{display:block;padding:72px 7.5%;scroll-margin-top:calc(var(--case-nav-height,82px) + 12px);}
.case-pages .ex-next-heading{margin-bottom:30px;}
.case-pages .ex-next-heading h2{margin-bottom:0;}
.case-pages .ex-recommendation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px;}
.case-pages .ex-next .ex-recommendation-card{display:block;width:100%;max-width:none;min-width:0;background:transparent;}
.case-pages .ex-recommendation-card figure{margin:0;background:transparent;}
.case-pages .ex-next .ex-recommendation-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:transparent;border:0;padding:0;}
.case-pages .ex-recommendation-card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;font:400 14px/1.7 var(--sans);}
.case-pages .ex-recommendation-card figcaption>span:first-child{min-width:0;text-wrap:pretty;}
.case-pages .ex-recommendation-card figcaption>span:last-child{flex:none;}
@media(max-width:1000px){.case-pages .ex-recommendation-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.case-pages .ex-next{padding:44px 7%;}.case-pages .ex-next-heading{margin-bottom:24px;}.case-pages .ex-recommendation-grid{gap:24px 16px;}.case-pages .ex-recommendation-card figcaption{font-size:12px;gap:8px;margin-top:10px;}}

/* One horizontal recommendation row on every screen size. */
.case-pages .ex-next-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center;}
.case-pages .ex-next-heading>.ex-kicker,.case-pages .ex-next-heading>h2{grid-column:1;}
.case-pages .ex-recommendation-controls{grid-column:2;grid-row:1 / span 2;display:flex;gap:10px;}
.case-pages .ex-recommendation-controls button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:20px;line-height:1;}
.case-pages .ex-recommendation-controls button:hover:enabled{border-color:var(--ochre);color:var(--ochre);}
.case-pages .ex-recommendation-controls button:disabled{opacity:.3;cursor:default;}
.case-pages .ex-recommendation-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 52px) / 3);column-gap:26px;row-gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0;scrollbar-width:thin;scrollbar-color:#a59e8860 transparent;padding:0 0 18px;}
.case-pages .ex-recommendation-card{scroll-snap-align:start;}
@media(max-width:1000px){.case-pages .ex-recommendation-grid{grid-auto-columns:calc((100% - 24px) / 2);column-gap:24px;}}
@media(max-width:700px){.case-pages .ex-next-heading{column-gap:12px;}.case-pages .ex-next-heading h2{font-size:24px;}.case-pages .ex-recommendation-controls{gap:8px;}.case-pages .ex-recommendation-controls button{width:34px;height:34px;font-size:18px;}.case-pages .ex-recommendation-grid{grid-auto-columns:84%;column-gap:16px;row-gap:0;}.case-pages .ex-recommendation-card figcaption{font-size:14px;}}

/* Case photography fills its presentation area without a paper mat. */
.case-pages .hero-art .art-button,
.case-pages .plate-art .art-button{padding:0;border:0;outline:0;background:transparent;overflow:hidden;}
.case-pages .hero-art img{object-fit:cover;}
.case-pages .plate-art img{width:100%;height:auto;max-height:none;}

.case-pages .hero-art .art-button:focus-visible,
.case-pages .plate-art .art-button:focus-visible{outline:2px solid var(--ochre);outline-offset:4px;}