/* Source PNGs remain independent, unmodified layers. Text and films stay live. */
#cards.stack-enabled { left:496px; top:122px; width:360px; height:466px!important; }
.collage-cutout { display:block; position:absolute; overflow:hidden; pointer-events:none; }
.collage-cutout > img { display:block; position:absolute; max-width:none; object-fit:fill; user-select:none; }
.collage-papers { position:absolute; inset:0; z-index:0; pointer-events:none; }
.collage-papers > .collage-cutout { filter:drop-shadow(1px 2px 1px #4c3a2924); }
.collage-notes img,
.collage-log > img,
.collage-backing > img { filter:saturate(.4) brightness(1.08); }
.collage-grid { left:-31px; top:-100px; width:430px; height:570px; rotate:1deg; }
.collage-backing { left:0; top:4px; width:368px; height:470px; rotate:2deg; }
.collage-notes { left:-56px; top:-30px; width:236px; height:137px; rotate:-9deg; }
.collage-log { left:294px; top:12px; width:143px; height:448px; rotate:2deg; }

@property --notes-peel {
  syntax:'<length>';
  inherits:true;
  initial-value:0px;
}
.collage-notes { --notes-peel:0px; overflow:visible; }
.notes-paper-face {
  inset:0;
  clip-path:polygon(0 var(--notes-peel),var(--notes-peel) 0,100% 0,100% 100%,0 100%);
}
.collage-notes::before,
.collage-notes::after {
  content:''; position:absolute; left:0; top:0;
  width:var(--notes-peel); height:var(--notes-peel); pointer-events:none;
}
.collage-notes::before {
  background:linear-gradient(135deg,transparent 48%,#4c3a2945 54%);
  transform:translate(2px,2px); filter:blur(1.6px);
}
.collage-notes::after {
  background:linear-gradient(135deg,#b2a58f 43%,#fffdf5 54%,#eee7d9 78%,#c9bca5);
  clip-path:polygon(100% 0,100% 100%,0 100%);
  border-bottom-right-radius:5px;
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .collage-notes { pointer-events:auto; transition:--notes-peel 340ms cubic-bezier(.22,.7,.25,1); }
  .collage-notes:hover { --notes-peel:18px; }
}

#cards.stack-enabled > #portfolioCard,
#cards.stack-enabled > .stack-card { background:none; box-shadow:none; rotate:1deg; filter:drop-shadow(2px 4px 3px #3e301c35); }
#cards.stack-enabled > .stack-preview { opacity:1; }
#cards.stack-enabled > .stack-preview::after {
  mask:url('assets/portfolio-collage-v1/05-ivory-backing-paper.webp') 50.8% 52.6% / 118.18% 109.08% no-repeat;
  -webkit-mask:url('assets/portfolio-collage-v1/05-ivory-backing-paper.webp') 50.8% 52.6% / 118.18% 109.08% no-repeat;
}
#cards.stack-enabled.is-dragging > #portfolioCard { box-shadow:none; }
#cards.stack-enabled .work-art {
  position:relative; isolation:isolate; overflow:visible; border:0; box-shadow:none;
  background:none; width:100%; height:100%!important; padding:48px 21px 40px;
}
#cards.stack-enabled .work-art::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url('assets/portfolio-collage-v1/05-ivory-backing-paper.webp') 50.8% 52.6% / 118.18% 109.08% no-repeat;
  filter:grayscale(1);
  mask:url('assets/portfolio-collage-v1/05-ivory-backing-paper.webp') 50.8% 52.6% / 118.18% 109.08% no-repeat;
  -webkit-mask:url('assets/portfolio-collage-v1/05-ivory-backing-paper.webp') 50.8% 52.6% / 118.18% 109.08% no-repeat;
}
#cards.stack-enabled .work-art::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--page-paper,#cde6f2); mix-blend-mode:multiply;
  mask:url('assets/portfolio-collage-v1/05-ivory-backing-paper.webp') 50.8% 52.6% / 118.18% 109.08% no-repeat;
  -webkit-mask:url('assets/portfolio-collage-v1/05-ivory-backing-paper.webp') 50.8% 52.6% / 118.18% 109.08% no-repeat;
}
#cards .work-kicker { font:9px/1.4 'Courier New',monospace; letter-spacing:.5px; padding:4px 0 8px; }
#cards .work-project { font-size:27px; line-height:1.3; letter-spacing:-.5px; margin:8px 0 2px; padding-right:32px; }
#cards .work-cover { margin:13px -4px 12px; border-width:6px; }
#cards .work-cover img { aspect-ratio:16 / 9; }
#cards .work-title { font-size:25px; line-height:1.25; letter-spacing:-.6px; margin:7px 0 6px; padding-bottom:3px; flex-shrink:0; -webkit-line-clamp:3; }
#cards .work-tags { font-size:9px; line-height:1.6; gap:4px 8px; }
#cards .work-tags > span + span::before { content:'/'; margin-right:7px; opacity:.65; }
#cards .collage-print { font-family:ArchivePress,'Noto Serif SC',SimSun,serif; font-weight:900; color:#161510; mask:url('assets/print-ink-mask.svg') 0 0 / 105px 105px; -webkit-mask:url('assets/print-ink-mask.svg') 0 0 / 105px 105px; }

#cards.stack-enabled .clip { left:26px; top:-5px; width:19px; height:49px; transform:none; rotate:-5deg; background:none; filter:drop-shadow(1px 1px 1px #21170d55); z-index:8; }
#cards.stack-enabled .star-seal { left:auto; top:27px; right:16px; width:50px; height:50px; transform:none; rotate:4deg; border:0; border-radius:0; background:none; box-shadow:none; filter:drop-shadow(1px 2px 1px #70502035); z-index:8; }

#cards.stack-enabled > .project-tabs { z-index:1; top:68px; right:-112px; width:134px; display:flex; gap:31px; }
#cards .project-tab,
#cards .project-tab:first-child,
#cards .project-tab.active {
  position:relative; width:134px; height:46px; min-height:0; padding:0; border:0; border-radius:0;
  clip-path:none; box-shadow:none; background:none; writing-mode:horizontal-tb;
  transform:none; rotate:-16deg; transform-origin:left center;
  filter:drop-shadow(1px 2px 1px #4c3a2938); transition:translate 180ms ease,filter 180ms ease;
}
#cards .project-tab:nth-child(2) { rotate:12deg; }
#cards .project-tab:nth-child(3) { rotate:-1deg; height:40px; }
#cards .project-tab > .collage-cutout { inset:0; }
#cards .project-tab::before,#cards .project-tab::after { display:none; }
#cards .project-tab:hover { translate:4px 0; transform:none; background:none; }
#cards .project-tab.active { filter:drop-shadow(2px 3px 2px #4c3a2955); }
#cards .project-tab:focus-visible { outline:2px solid #814d29; outline-offset:4px; }

.collage-navigation { position:absolute; inset:0; z-index:8; pointer-events:none; }
.collage-next { position:absolute; width:180px; height:39px; right:4px; bottom:-20px; rotate:-11deg; pointer-events:auto; filter:drop-shadow(1px 2px 1px #4c3a2938); transition:translate 200ms ease,filter 200ms ease; }
.collage-next .collage-cutout { inset:0; }
.collage-next:hover { translate:2px -2px; filter:drop-shadow(1px 4px 2px #4c3a2940); }
.collage-next:active { translate:0 0; }
.collage-next:disabled { opacity:.65; cursor:wait; }
.collage-next:focus-visible { outline:2px solid #ac482a; outline-offset:5px; }
.collage-sr-control,.collage-sr-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.collage-sr-control:focus-visible { clip-path:none; width:auto; height:auto; left:10px; bottom:7px; padding:7px; background:#fff9e8; color:#171510; pointer-events:auto; font-size:12px; outline:2px solid #ac482a; }
#cards .stack-hint { left:2px; right:auto; bottom:-41px; font-size:8px; }

@media(max-width:600px) {
  .mobile-open #cards.stack-enabled { left:38px; top:699px; width:270px; height:412px!important; transform:none; }
  .mobile-open .collage-grid { left:-20px; top:-88px; width:319px; height:506px; }
  .mobile-open .collage-notes { left:-27px; top:-29px; width:166px; height:96px; }
  .mobile-open .collage-backing { width:276px; height:416px; }
  .mobile-open .collage-log { left:216px; top:16px; width:110px; height:382px; }
  .mobile-open #cards.stack-enabled .work-art { width:100%; padding:40px 15px 42px; }
  .mobile-open #cards .work-kicker { font-size:8px; }
  .mobile-open #cards .work-project { font-size:21px; margin-top:8px; padding-right:19px; }
  .mobile-open #cards .work-title { font-size:21px; line-height:1.3; }
  .mobile-open #cards .work-tags { font-size:8px; gap:3px 5px; }
  .mobile-open #cards .work-tags > span + span::before { margin-right:4px; }
  .mobile-open #cards .work-cover { margin:12px -2px 10px; border-width:5px; }
  .mobile-open #cards.stack-enabled > .project-tabs { top:66px; right:-75px; width:90px; gap:28px; }
  .mobile-open #cards .project-tab,.mobile-open #cards .project-tab:first-child { width:90px; height:34px; }
  .mobile-open #cards .project-tab:nth-child(3) { height:30px; }
  .mobile-open #cards.stack-enabled .clip { left:21px; top:-4px; width:16px; height:40px; transform:none; }
  .mobile-open #cards.stack-enabled .star-seal { top:28px; right:10px; width:35px; height:35px; }
  .mobile-open .collage-next { width:142px; height:32px; bottom:-6px; right:0; }
  .mobile-open #cards .stack-hint { bottom:-35px; font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .collage-next,#cards .project-tab { transition:none; }
}
@media(forced-colors:active) {
  #cards .collage-print { mask:none; -webkit-mask:none; color:ButtonText; }
  .collage-next::after { content:'下一件作品 →'; background:ButtonFace; color:ButtonText; }
  #cards .project-tab::after { content:attr(aria-label); display:block; background:ButtonFace; color:ButtonText; }
}