/* Portfolio extensions inherit the original three palettes and type system. */
.upload-entry,.asset-button,.upload-tab,.upload-close{font:inherit;cursor:pointer;touch-action:manipulation}
.work-card{position:relative}
.upload-card-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--border);cursor:default}
.upload-count{font:12px var(--font-mono);color:var(--text-secondary)}
.upload-entry,.asset-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--border);padding:11px 15px;background:var(--bg-surface);color:var(--text-primary);font-size:14px;line-height:1.4;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.upload-entry:hover,.asset-button:hover{border-color:var(--accent);color:var(--accent)}
.upload-entry svg,.asset-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}
.upload-entry:hover .upload-arrow{animation:upload-arrow-hop .65s var(--ease-out-expo)}
.upload-entry:focus-visible,.asset-button:focus-visible,.upload-tab:focus-visible,.upload-close:focus-visible,.upload-drop:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.asset-button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-weight:700}
.asset-button:disabled{opacity:.45;cursor:not-allowed}
.uploaded-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:asset-image-in .65s var(--ease-out-expo);z-index:1}
.upload-dialog{margin:auto;width:min(760px,calc(100vw - 32px));max-height:90dvh;overflow:auto;padding:0;border:1px solid var(--accent);background:var(--bg-base);color:var(--text-primary);box-shadow:14px 14px 0 color-mix(in srgb,var(--accent) 15%,transparent)}
.upload-dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(7px)}
.upload-dialog[open]{animation:upload-dialog-in .32s var(--ease-out-expo)}
.upload-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:28px 30px 20px;border-bottom:1px solid var(--border)}
.upload-kicker{font:12px var(--font-mono);color:var(--accent);letter-spacing:.08em}
.upload-dialog h2{font-size:27px;line-height:1.4;font-weight:900;margin:10px 0 6px}
.upload-dialog .upload-project-name{font-size:14px;color:var(--text-secondary);line-height:1.6}
.upload-close{border:1px solid var(--border);background:none;color:var(--text-primary);width:42px;height:42px;font-size:25px;flex-shrink:0;transition:transform var(--t-smooth),border-color var(--t-fast)}
.upload-close:hover{transform:rotate(90deg);border-color:var(--accent)}
.upload-dialog-content{padding:24px 30px 30px}
.upload-tabs{display:flex;gap:8px;margin-bottom:22px}
.upload-tab{flex:1;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-secondary);font-size:14px;padding:12px;transition:background var(--t-fast),color var(--t-fast)}
.upload-tab[aria-pressed=true]{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
.upload-drop{display:grid;place-items:center;text-align:center;gap:12px;border:1px dashed var(--text-muted);padding:26px 18px;background:var(--bg-surface);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.upload-drop.is-over{border-color:var(--accent);background:var(--accent-subtle)}
.upload-drop svg{width:42px;height:42px;fill:none;stroke:var(--accent);stroke-width:1.5}
.upload-drop:hover .upload-arrow,.upload-drop.is-over .upload-arrow{animation:upload-arrow-hop .7s var(--ease-out-expo) infinite}
.upload-drop strong{font-size:16px}
.upload-drop small,.upload-hint{font-size:13px;color:var(--text-secondary);line-height:1.6}
.upload-field{display:grid;gap:8px;margin-top:18px;font-size:14px}
.upload-field input,.upload-field textarea{width:100%;border:1px solid var(--border);background:var(--bg-surface);color:var(--text-primary);padding:12px 14px;font:16px/1.7 var(--font-body);box-sizing:border-box;border-radius:0}
.upload-field input:focus,.upload-field textarea:focus{outline:1px solid var(--accent);border-color:var(--accent)}
.upload-field textarea{min-height:130px;resize:vertical}
.upload-queue{display:grid;gap:10px;margin:18px 0}
.upload-file{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;border:1px solid var(--border);padding:12px;animation:asset-text-in .3s var(--ease-out-expo)}
.upload-file img{width:52px;height:52px;object-fit:cover;background:var(--bg-surface-elevated)}
.upload-file-symbol{display:grid;place-items:center;width:52px;height:52px;background:var(--bg-surface-elevated);color:var(--accent);font:12px var(--font-mono)}
.upload-file-info{min-width:0}
.upload-file-name{font-size:14px;overflow-wrap:anywhere;line-height:1.4}
.upload-file-status{font:12px/1.6 var(--font-mono);color:var(--text-secondary);margin:4px 0}
.upload-file progress{display:block;width:100%;height:4px;appearance:none;border:0;background:var(--border);accent-color:var(--accent)}
.upload-file progress::-webkit-progress-bar{background:var(--border)}
.upload-file progress::-webkit-progress-value{background:var(--accent);transition:width .12s linear}
.upload-file[data-state=done]{border-color:var(--accent)}
.upload-file[data-state=error]{border-color:#ec8369}
.upload-file[data-state=verifying] progress{animation:upload-verifying .7s ease-in-out infinite alternate}
.upload-file-action{padding:8px;font-size:13px}
.upload-status{min-height:28px;display:block;color:var(--accent);font-size:14px;line-height:1.6;margin:16px 0;overflow-wrap:anywhere}
.upload-status.is-error{color:#ec8369}
body[data-theme=invert] .upload-status.is-error{color:#a82d1a}
.upload-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:18px}
.upload-footer .upload-hint{max-width:330px}
.portfolio-materials{margin:38px 0 52px;border-top:2px solid var(--accent);padding-top:26px;color:var(--paper-text)}
.materials-header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}
.materials-header h2{font-size:26px;font-weight:900;color:inherit;margin:6px 0}
.materials-header .upload-kicker{color:inherit;opacity:.7}
.material-state{padding:24px;border:1px dashed currentColor;line-height:1.7;font-size:15px;opacity:.75}
.materials-list{display:grid;gap:32px}
.material-item{border-bottom:1px solid #c8c7c0;padding-bottom:28px;min-width:0}
.material-item h3{font-size:21px;line-height:1.6;overflow-wrap:anywhere;margin:0 0 12px}
.material-copy{font-size:16px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin:14px 0 0}
.material-image-button{display:block;width:100%;padding:0;border:0;background:#deddd6;cursor:zoom-in}
.material-image-button img{display:block;width:100%;height:auto;max-height:720px;object-fit:contain}
.material-item video{display:block;width:100%;max-height:660px;background:#111;animation:none!important;transition:none!important;transform:none!important}
.material-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.material-actions .asset-button{padding:7px 11px;font-size:13px}
.material-image-enter{animation:asset-image-in .7s var(--ease-out-expo) both}
.material-text-enter{animation:asset-text-in .55s var(--ease-out-expo) both}
.material-error{padding:20px;border:1px dashed #777;font-size:14px}
.material-notice{display:flex;gap:12px;align-items:center;margin:12px 0;font-size:14px;line-height:1.6}
.portfolio-viewer{width:min(1100px,calc(100vw - 24px));max-height:94dvh;padding:14px;border:1px solid var(--accent);background:var(--bg-base);color:var(--text-primary);margin:auto}
.portfolio-viewer::backdrop{background:rgba(0,0,0,.9)}
.portfolio-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px;font-size:15px}
.portfolio-viewer img{display:block;max-width:100%;max-height:76dvh;margin:auto;object-fit:contain;animation:asset-image-in .4s var(--ease-out-expo)}
.upload-hidden,[hidden]{display:none!important}
.owner-access{position:fixed;left:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:color-mix(in srgb,var(--bg-base) 90%,transparent);color:var(--text-secondary);padding:9px 12px;font:12px var(--font-mono);cursor:pointer;backdrop-filter:blur(10px);transition:color var(--t-fast),border-color var(--t-fast),transform var(--t-smooth)}
.owner-access{left:auto;right:18px;bottom:calc(18px + var(--safe-bottom,0px));z-index:250}
.owner-access svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
body .btn-float-top{box-shadow:0 3px 8px color-mix(in srgb,var(--text-primary) 16%,transparent);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
body .btn-float-top:hover,body .btn-float-top:focus-visible{transform:translateY(-3px);box-shadow:0 7px 14px color-mix(in srgb,var(--text-primary) 22%,transparent)}
body .btn-float-top:active{transform:translateY(1px);box-shadow:0 1px 3px color-mix(in srgb,var(--text-primary) 12%,transparent)}
.social-results{padding:4rem max(1.5rem,calc((100vw - 1200px)/2));border-bottom:1px solid var(--border);color:var(--text-primary);background:var(--bg-base)}
.social-results h2{font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.3;margin:1rem 0}
.social-results-intro>p{color:var(--text-secondary);max-width:780px;line-height:1.8}
.social-results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;margin-top:2.5rem}
.social-result{border:1px solid var(--border);border-top:2px solid var(--accent);padding:1.5rem;background:var(--bg-surface);transition:border-color .25s,box-shadow .25s}
.social-result:hover,.social-result:focus-within{border-color:var(--accent);box-shadow:6px 6px 0 var(--accent-subtle)}
.social-emblem{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px dashed var(--border);color:var(--accent)}
.social-emblem>svg{width:72px;height:72px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.social-emblem>span{font:10px var(--font-mono);letter-spacing:.12em;color:var(--text-secondary)}
.ig-lens{opacity:.25}.ig-flash{fill:currentColor}.ig-sprout,.ig-tiles{transform-box:fill-box;transform-origin:center}
.social-result.is-visible .social-emblem>svg{animation:ig-grow .8s ease both}
.social-result:hover .ig-sprout,.social-result:focus-within .ig-sprout{animation:ig-grow .8s ease both}
.social-result:hover .ig-tiles,.social-result:focus-within .ig-tiles{animation:ig-publish .8s ease both}
.social-result:hover .ig-flash,.social-result:focus-within .ig-flash{animation:ig-flash .7s ease}
.social-result a>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}
.social-result a:focus-visible,.draggable-sticker:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@keyframes ig-grow{0%{opacity:.3;transform:translateY(5px) scale(.65)}65%{transform:translateY(-2px) scale(1.07)}100%{opacity:1;transform:none}}
@keyframes ig-publish{0%{opacity:.3;transform:rotate(-12deg) scale(.8)}65%{transform:rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes ig-flash{50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.social-result,.social-result *{animation:none!important;transition:none!important}}
.social-result-index,.social-handle{color:var(--accent);font:13px var(--font-mono)}
.social-result h3{font-size:1.6rem;margin:1rem 0 .5rem}
.social-result p:not(.social-handle){line-height:1.8;color:var(--text-secondary);margin:1rem 0}
.social-result strong{display:block;font-size:.9rem;line-height:1.7}
.social-result a{display:inline-flex;gap:14px;align-items:center;color:var(--accent);margin-top:1.5rem;padding:12px 16px;text-decoration:none;border:1px solid var(--accent);background:var(--bg-base)}
.social-result a span{display:inline-block;transition:transform .2s ease}
.social-result a:hover span,.social-result a:focus-visible span{transform:translate(3px,-3px)}
@media(max-width:640px){.social-results-grid{grid-template-columns:1fr}.social-results{padding:3rem 1.2rem}}
@media(prefers-reduced-motion:reduce){.social-result a span{transition:none;transform:none!important}}
.case-social-link{display:inline-flex;gap:10px;align-items:center;margin-top:14px;padding:10px 14px;border:1px solid #64748b;color:#172132;background:#fff;text-decoration:none;font-weight:700;transition:transform .2s ease,box-shadow .2s ease}
.case-social-link:hover,.case-social-link:focus-visible{transform:translateY(-2px);box-shadow:3px 3px 0 var(--accent)}
@media(prefers-reduced-motion:reduce){.btn-float-top,.case-social-link{transition:none!important;transform:none!important}}
.owner-access:hover,.owner-access:focus-visible,.owner-access.is-unlocked{color:var(--accent);border-color:var(--accent)}
.owner-access:hover .owner-shackle,.owner-access:focus-visible .owner-shackle{animation:owner-unlock .8s var(--ease-out-expo)}
.owner-access.is-unlocked .owner-lock{fill:var(--accent-subtle)}
.owner-dialog{width:min(540px,calc(100vw - 32px))}
@keyframes owner-unlock{0%,100%{transform:none}45%{transform:translateY(-2px) rotate(-8deg);transform-origin:8px 10px}}
@keyframes upload-arrow-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}}
@keyframes upload-dialog-in{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(8px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes asset-image-in{from{opacity:0;clip-path:inset(0 0 12% 0);transform:translateY(10px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes asset-text-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes upload-verifying{from{opacity:.4}to{opacity:1}}
@media(max-width:640px){.upload-dialog header{padding:22px 20px 16px}.upload-dialog-content{padding:20px}.upload-dialog h2{font-size:23px}.upload-footer{align-items:stretch;flex-direction:column}.upload-card-tools{padding:12px 16px}.materials-header{align-items:flex-start;flex-direction:column}.upload-file{grid-template-columns:40px 1fr auto;gap:8px}.upload-file img,.upload-file-symbol{width:40px;height:40px}.upload-dialog{box-shadow:5px 5px 0 var(--accent-subtle)}.portfolio-materials{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.upload-dialog,.upload-entry *,.upload-drop *,.upload-file,.uploaded-cover,.material-image-enter,.material-text-enter,.portfolio-viewer img,.owner-access *{animation:none!important;transition:none!important;transform:none!important;clip-path:none!important}}