/* Object & Animal's continuous image/word rhythm, adapted to Jyun's black portfolio. */
.page-onepage { --feed-inset:clamp(24px,4.7vw,96px); --feed-gap:clamp(18px,2vw,32px); --paper:#eee; --muted:#929292; }
html:has(.page-onepage) { scroll-padding-top:32px; }
/* One viewport, a full image plane, a small two-ended caption. */
.flow-hero { position:relative; height:100svh; min-height:520px; padding:0; background:#000; isolation:isolate; }
.hero-stage { position:relative; width:100%; height:100%; overflow:hidden; touch-action:pan-y; outline-offset:-6px; }
.hero-panel { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translate3d(28px,0,0); transition:opacity 1.4s cubic-bezier(.45,0,.55,1),transform 1.6s cubic-bezier(.22,1,.36,1),visibility 0s 1.6s; pointer-events:none; }
.hero-panel.is-active { visibility:visible; opacity:1; transform:none; pointer-events:auto; transition-delay:0s; z-index:2; }
.hero-panel.is-leaving { visibility:visible; opacity:0; transform:translate3d(-28px,0,0); z-index:1; }
.motion-disabled .hero-panel { transition:none; transform:none; }
.hero-film,.hero-image { position:relative; display:block; height:100%; width:100%; background:#000; }
.hero-image img,.hero-image video { position:absolute; inset:0; height:100%; width:100%; max-width:none; object-fit:cover; }
.hero-image video { opacity:0; transition:opacity .45s; background:#000; }
.hero-image video.ready { opacity:1; }
.hero-caption { position:absolute; z-index:3; inset:auto 0 0; display:flex; align-items:end; min-height:110px; gap:12px; padding:40px var(--inset) max(18px,env(safe-area-inset-bottom)); background:linear-gradient(transparent,#000a); font:500 15px/1.3 var(--display); letter-spacing:0; }
.hero-caption>a { display:flex; justify-content:space-between; align-items:center; flex:1; min-width:0; gap:30px; min-height:44px; }
.hero-caption [data-hero-artist] { color:#ddd; }
.hero-caption [data-hero-title] { text-align:right; }
.hero-controls { display:flex; align-items:center; gap:4px; }
.hero-controls>button { position:relative; display:grid; place-items:center; width:36px; min-width:36px; height:44px; margin:0; font:400 18px/1 var(--display); }
.hero-controls .motion-control { width:28px; min-width:28px; }
.hero-controls .motion-icon { font-size:11px; }
.hero-controls .motion-control>span:last-child { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }

/* A compact filmstrip and a clear title/artist hierarchy inside the existing opening. */
.hero-library { position:absolute; z-index:3; inset:auto 0 0; padding:0 var(--inset) max(18px,env(safe-area-inset-bottom)); isolation:isolate; overflow-anchor:none; }
.hero-library::before { content:""; position:absolute; z-index:-1; inset:-80px 0 0; background:linear-gradient(transparent,rgba(0,0,0,.55) 54%,rgba(0,0,0,.72)); pointer-events:none; }
.hero-library .hero-caption { position:relative; inset:auto; gap:24px; padding:26px 0 18px; min-height:114px; background:none; }
.hero-library .hero-caption>a { flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:9px; min-height:0; }
.hero-library .hero-caption [data-hero-title] { order:-1; text-align:left; color:#f5f5f2; font:400 clamp(34px,3.7vw,62px)/1.02 'Replica Pro',Helvetica,Arial,'Noto Sans TC',sans-serif; letter-spacing:-.025em; overflow-wrap:anywhere; text-wrap:balance; text-shadow:0 2px 20px #0005; }
.hero-library .hero-caption [data-hero-artist] { color:#d3d3d3; font:500 clamp(12px,1.08vw,15px)/1.35 var(--display); letter-spacing:.035em; }
.hero-library .hero-controls { flex:none; align-self:flex-end; gap:12px; }
.hero-library .hero-controls .motion-control { width:44px; min-width:44px; height:44px; }
.hero-library .hero-controls .motion-icon { font-size:14px; }
.hero-reel-count { flex:none; color:#aaa; font:400 10px/1 var(--display); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hero-reel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(88px,1fr); overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain; scrollbar-width:none; border-radius:6px; background:#0009; scroll-snap-type:x proximity; touch-action:pan-x; }
.hero-reel::-webkit-scrollbar { display:none; }
.hero-reel-item { display:block; position:relative; min-width:0; height:clamp(52px,5.35vw,84px); overflow:hidden; scroll-snap-align:center; outline-offset:-2px; isolation:isolate; -webkit-user-drag:none; user-select:none; }
.hero-reel-item img { width:100%; height:100%; display:block; object-fit:cover; opacity:.48; transition:opacity .5s; pointer-events:none; }
.hero-reel-item:hover img,.hero-reel-item:focus-visible img,.hero-reel-item[aria-current] img { opacity:1; }
.hero-reel-item[aria-current] { box-shadow:inset 0 0 0 1px #ffffff9c; }
.hero-reel-item[aria-current]::after { content:""; position:absolute; inset:0; border:1px solid #ffffff7a; pointer-events:none; z-index:2; }
.hero-reel-name { position:absolute; inset:auto 9px 8px; z-index:1; color:#fff; opacity:0; font:500 10px/1.25 var(--display); text-shadow:0 1px 6px #000,0 1px 16px #000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:opacity .25s; pointer-events:none; }
.hero-reel-item:hover .hero-reel-name,.hero-reel-item:focus-visible .hero-reel-name { opacity:1; }
.hero-reel-playhead { display:none; position:absolute; z-index:3; inset:0; border-right:2px solid #eee; transform:translateX(calc((var(--hero-elapsed,0) - 1)*100%)); pointer-events:none; }
.hero-reel-item[aria-current] .hero-reel-playhead { display:block; }
@media(max-width:760px) {
  .hero-library { padding-inline:var(--feed-inset); }
  .hero-library .hero-caption { min-height:108px; padding:22px 0 16px; gap:14px; }
  .hero-library .hero-caption>a { gap:7px; }
  .hero-library .hero-caption [data-hero-title] { font-size:clamp(25px,7.6vw,36px); line-height:1.04; letter-spacing:-.02em; }
  .hero-library .hero-caption [data-hero-artist] { font-size:12.5px; letter-spacing:.025em; }
  .hero-reel { grid-auto-columns:96px; }
  .hero-reel-item { height:54px; }
  .hero-reel-count { display:none; }
}
@media(prefers-reduced-motion:reduce) { .hero-reel-item img,.hero-reel-name { transition:none; } }

/* Read with the scroll: a sticky paragraph, not a timed entrance. */
.scroll-statement { height:110svh; margin-top:6svh; margin-bottom:0; padding:0 28px; position:relative; pointer-events:none; }
.scroll-statement-sticky { position:sticky; top:calc(40svh - 64px); display:flex; justify-content:center; align-items:center; padding-block:16px; }
.scroll-statement p { width:100%; max-width:896px; text-align:center; color:var(--paper); font:500 clamp(20px,1.67vw,30px)/1.4 var(--display); letter-spacing:0; text-transform:none; text-wrap:pretty; }
.scroll-statement .reveal-word { display:inline-block; will-change:auto; }
.scroll-statement [lang=zh-Hant] .reveal-word { display:inline; }

/* Every selected film has the entire image width, at its cinematic ratio. */
.page-onepage .onepage-work { padding-top:0; }
.page-onepage .index-intro { height:0; padding:0; scroll-margin-top:150px; }
.page-onepage .index-intro h2 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.page-onepage .index-collection { padding-inline:0; }
.page-onepage .collection-controls { display:none; margin:0 0 40px; padding:0; border:0; gap:12px 24px; }
.page-onepage .filters { gap:6px 23px; }
.page-onepage .filters button { font-size:12px; letter-spacing:0; color:#757575; }
.page-onepage .filters button.active { color:#eee; }
.page-onepage .view-controls { gap:18px; }
.page-onepage .view-controls button,.page-onepage .film-search input { font-size:11px; }
.page-onepage .view-controls button { min-height:44px; color:#777; }
.page-onepage .view-controls button[aria-pressed=true] { color:#eee; }
.page-onepage .film-search { flex-basis:95px; }
.editorial-feed { display:grid; grid-template-columns:minmax(0,1fr); row-gap:clamp(18px,2vw,32px); position:relative; padding-bottom:60px; }
.feed-row { display:block; position:relative; min-width:0; isolation:isolate; }
.feed-motion { min-width:0; }
.feed-card { display:block; position:relative; width:100%; }
.feed-media { position:relative; width:100%; aspect-ratio:var(--frame-ratio); overflow:hidden; background:#000; }
.feed-media img,.feed-media video { width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }
.feed-media video { opacity:0; transition:opacity .4s; }
.feed-media video.ready { opacity:1; }
.feed-caption { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; min-height:56px; align-items:center; padding:12px var(--feed-inset); color:#aaa; transition:color .25s; }
.feed-artist,.feed-caption h3 { font:500 15px/1.4 var(--display); letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-caption h3 { text-align:right; text-transform:uppercase; }
.feed-card:hover .feed-caption,.feed-card:focus-visible .feed-caption { color:#fff; }
.feed-card:focus-visible { outline-offset:6px; }
.all-work-link { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; width:calc(100% - var(--feed-inset)*2); min-height:150px; margin:8px var(--feed-inset) 0; padding:24px 0 8px; border:0;  color:#eee; }
.all-work-label { display:flex; align-items:flex-start; min-width:0; gap:16px; }
.all-work-word { display:block; height:1.08em; overflow:hidden; font:500 clamp(52px,8.4vw,132px)/1.08 var(--display); letter-spacing:-.055em; }
.all-work-roll { display:block; transition:transform .85s cubic-bezier(.22,1,.36,1); }
.all-work-line { display:block; line-height:1.08; }
.all-work-count { padding-top:10px; font:500 11px/1.2 var(--display); font-variant-numeric:tabular-nums; color:#929292; }
.all-work-symbol { flex:none; width:clamp(48px,6.2vw,88px); height:clamp(48px,6.2vw,88px); margin-left:24px; fill:none; stroke:currentColor; stroke-width:1; }
.all-work-symbol .frame-back,.all-work-symbol .frame-front { transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .6s; }
.all-work-symbol .frame-back { opacity:.35; }
.all-work-symbol .frame-front { opacity:.7; }
.all-work-link:hover .all-work-roll,.all-work-link:focus-visible .all-work-roll { transform:translateY(-50%); }
.all-work-link:hover .frame-back,.all-work-link:focus-visible .frame-back { transform:translate(-4px,-4px); opacity:.65; }
.all-work-link:hover .frame-front,.all-work-link:focus-visible .frame-front { transform:translate(4px,4px); opacity:1; }
.page-onepage .index-columns { padding-block:12px 48px; }
.page-onepage .index-row h2 { font-size:clamp(23px,2.1vw,34px); letter-spacing:-.025em; }
.page-onepage .index-artist { font-size:12px; }
.page-onepage .onepage-about { padding-top:100px; }
.page-onepage .biography { padding-inline:var(--feed-inset); padding-bottom:100px; gap:10vw; scroll-margin-top:40px; }
.page-onepage .bio-copy .bio-lead { font-size:clamp(26px,2.5vw,42px); line-height:1.25; letter-spacing:-.025em; }
.page-onepage .bio-copy p { font-size:15px; }
.page-onepage .about-name { font-size:20px; letter-spacing:-.015em; }
.page-onepage .recognition-disclosure { margin-inline:var(--feed-inset); }
.page-onepage .contact-section { margin-inline:var(--feed-inset); padding-bottom:60px; scroll-margin-top:50px; }
.page-onepage .contact-section h2 { font-size:12px; margin-bottom:26px; }
.page-onepage .contact-email { font-size:clamp(26px,3.1vw,54px); letter-spacing:-.025em; font-weight:500; }
.page-onepage .site-footer { margin-inline:var(--feed-inset); }
.page-onepage .site-footer>div { font-size:12px; }
.page-onepage .project-body .film-intro h1 { font-size:clamp(36px,5vw,80px); letter-spacing:-.035em; }
.page-onepage .project-body .film-meta-line { font-size:13px; }

@media(min-width:1800px) { .feed-caption h3,.feed-artist,.hero-caption { font-size:15px; } }
@media(max-width:1000px) { .page-onepage .collection-controls { margin-bottom:24px; } .page-onepage .filters { flex-basis:100%; } .page-onepage .view-controls { gap:16px; } .feed-artist,.feed-caption h3 { font-size:13px; } }
@media(max-width:760px) {
  .page-onepage { --feed-inset:20px; }
  html:has(.page-onepage) { scroll-padding-top:22px; }
  .flow-hero { min-height:530px; }
  /* Phone selections fill the viewport; the image retains its proportions. */
  .hero-image img,.hero-image video { object-fit:cover; object-position:50% 50%; }
  .hero-caption { min-height:82px; padding:16px var(--feed-inset) max(18px,env(safe-area-inset-bottom)); gap:6px; font-size:10px; }
  .hero-caption>a { flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
  .hero-caption [data-hero-title] { text-align:left; font-size:12px; line-height:1.3; }
  .hero-controls { gap:0; }
  .hero-controls>button { width:34px; min-width:34px; }
  .scroll-statement { margin-top:4svh; padding-inline:26px; }
  .scroll-statement-sticky { top:calc(42svh - 88px); }
  .scroll-statement p { font-size:21px; line-height:1.45; max-width:600px; }
  .page-onepage .filters button { font-size:10px; }
  .page-onepage .filters { gap:4px 20px; }
  .page-onepage .view-controls { gap:16px; }
  .page-onepage .view-controls button,.page-onepage .film-search input { font-size:10px; }
  .page-onepage .index-intro { padding:0; scroll-margin-top:125px; }
  .page-onepage .collection-controls { margin-bottom:42px; }
  .editorial-feed { grid-template-columns:minmax(0,1fr); row-gap:24px; }
  .feed-media { aspect-ratio:var(--frame-ratio); }
  .feed-caption { grid-template-columns:minmax(0,1fr); min-height:68px; padding:13px var(--feed-inset) 8px; gap:5px; align-content:start; }
  .feed-artist,.feed-caption h3 { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
  .feed-artist { font-size:10px; line-height:1.4; color:#929292; }
  .feed-caption h3 { font-size:14px; line-height:1.35; text-align:left; color:#ddd; }
  .all-work-link { min-height:106px; margin-top:6px; padding-top:20px; }
  .all-work-label { gap:9px; }
  .all-work-word { font-size:clamp(40px,10.8vw,74px); }
  .all-work-count { font-size:9px; padding-top:5px; }
  .all-work-symbol { width:44px; height:44px; margin-left:14px; }
  .page-onepage .onepage-about { padding-top:38px; }
  .page-onepage .biography { padding-bottom:70px; gap:38px; scroll-margin-top:125px; }
  .page-onepage .contact-section { scroll-margin-top:125px; }
  .page-onepage .portrait { width:85%; }
  .page-onepage .bio-copy .bio-lead { font-size:30px; }
  .page-onepage .contact-email { font-size:clamp(22px,6.2vw,36px); }
  .page-onepage .site-footer>div { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .hero-panel { transition:none; transform:none; } .reveal-word { opacity:1!important; } .feed-motion { transform:none!important; } .all-work-roll,.all-work-symbol>* { transition:none!important; transform:none!important; } }

@media(max-width:380px) { .page-onepage { --feed-inset:16px; } }