/* TA 专页：继承原站顶部；作品区独立样式。 */
:root { --ta-line:#2b3548; --ta-soft:#a7b6cc; }
body { background:#0a0e17; }
.page-links { display:flex; justify-content:space-between; gap:20px; padding:15px 3px 23px; font-size:.78rem; letter-spacing:.06em; color:var(--text-secondary); }
.skip-link { position:fixed; top:-80px; left:20px; z-index:20; padding:12px; background:#fff; color:#111; }
.skip-link:focus { top:10px; }
.profile-card { margin-bottom:52px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; min-height:42px; border:1px solid #405373; border-radius:5px; color:#c4d9ff; background:#172339; font-size:.8rem; }
.button:hover { background:#233553; color:#fff; }
.button.website { color:#8eebd5; border-color:#36675c; background:#152e2b; }
.work-filters { display:flex; gap:5px; flex-wrap:wrap; position:sticky; top:0; z-index:5; padding:15px 0; border-top:1px solid var(--ta-line); border-bottom:1px solid var(--ta-line); background:rgba(10,14,23,.97); }
.filter-button { padding:9px 15px; min-height:42px; font-size:.84rem; background:transparent; color:var(--text-secondary); border:1px solid transparent; border-radius:4px; }
.filter-button span { font-size:.65rem; margin-left:9px; opacity:.7; }
.filter-button[aria-pressed=true] { color:#e9f2ff; background:#1e304c; border-color:#385174; }
.filter-button:hover { color:#e9f2ff; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 28px; }
.work-card { min-width:0; display:flex; flex-direction:column; }
.case-open { border:0; background:none; text-align:left; color:inherit; width:100%; display:flex; flex-direction:column; flex:1; }
.work-cover { position:relative; width:100%; aspect-ratio:16/8.5; overflow:hidden; background:#111b2a; border:1px solid #28374c; border-radius:7px; }
.work-cover svg { display:block; width:100%; height:100%; }
.work-cover img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .25s; }
.case-open:hover .work-cover { border-color:#6488b9; }
.case-open:hover img { transform:scale(1.025); }
.cover-note { position:absolute; bottom:12px; left:15px; font-size:.63rem; color:#c1cfe2; background:#0b1326d9; padding:3px 7px; border:1px solid #ffffff20; border-radius:3px; }
.work-card h2 { font-family:var(--font-body); font-size:1.2rem; letter-spacing:0; line-height:1.5; }
.work-summary { font-size:.85rem; line-height:1.9; margin:9px 0 13px; color:#aebbd0; }
.card-links { display:flex; gap:9px; margin-top:12px; }
.card-links .button { padding:6px 12px; min-height:35px; font-size:.73rem; }
#case-dialog { margin:auto; padding:0; width:min(960px,94vw); max-height:91vh; max-height:91dvh; border:1px solid #38475d; border-radius:10px; background:#101827; color:#dde6f4; overscroll-behavior:contain; }
#case-dialog::backdrop { background:#030711dc; }
.dialog-toolbar { position:sticky; top:0; z-index:2; background:#111b2a; padding:12px 26px; border-bottom:1px solid var(--ta-line); display:flex; justify-content:space-between; align-items:center; gap:15px; color:#90a2bd; font-size:.7rem; }
#case-close { background:#1e2a3d; color:#d8e7fa; padding:10px 15px; border:1px solid #344761; border-radius:4px; }
#case-content { padding:32px; }
#case-title { font-family:var(--font-body); font-size:1.8rem; margin:10px 0 14px; }
.case-context { color:#9cb4d7; font-size:.78rem; }
.case-role { display:flex; flex-wrap:wrap; gap:8px 24px; margin:15px 0 22px; font-size:.8rem; color:#aabbd3; }
.case-outcome { border-left:2px solid #7caaff; padding:12px 18px; margin:24px 0; background:#18243a; color:#d0dff4; }
.case-visual { aspect-ratio:16/7; margin:20px 0; }
.case-visual img { object-fit:contain; }
.case-visual.has-image { aspect-ratio:auto; }
.case-visual.has-image img { height:auto; }
.case-flow { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 30px; }
.case-flow span { padding:8px 12px; border:1px solid #34455e; border-radius:4px; font-size:.74rem; color:#b8cff0; }
.case-flow span:not(:last-child)::after { content:' →'; margin-left:12px; color:#718bac; }
.case-sections { display:grid; grid-template-columns:1fr 1fr; gap:25px 30px; }
.case-section h3 { font-size:1rem; padding-top:15px; border-top:1px solid var(--ta-line); margin-bottom:10px; }
.case-section ul { padding-left:18px; }
.case-section li { color:#aebfd6; font-size:.88rem; line-height:1.95; margin-bottom:8px; }
.case-media { margin-top:24px; }
.case-media figure { margin:20px 0; }
.case-media img,.case-media video { max-width:100%; width:100%; background:#070b12; border-radius:5px; }
.case-media figcaption { font-size:.78rem; color:#8fa5c4; margin-top:7px; }
body.dialog-open { overflow:hidden; }
a:focus-visible,button:focus-visible { outline:2px solid #a5cdff; outline-offset:4px; }
@media(max-width:760px) { .work-intro { grid-template-columns:1fr; gap:22px; } .profile-card { margin-bottom:34px; } h1 { font-size:1.9rem; } h1 span { font-size:1.25rem; } .work-grid { gap:32px 18px; } .work-meta { align-items:flex-start; flex-direction:column; } .case-sections { grid-template-columns:1fr; } #case-content { padding:22px; } .contact-block { align-items:flex-start; flex-direction:column; } }
@media(max-width:560px) { .work-grid { grid-template-columns:1fr; } .page-links { font-size:.68rem; flex-wrap:wrap; gap:9px; } .page-links div { gap:18px; } .results-heading { align-items:flex-start; flex-direction:column; gap:4px; } .work-filters { gap:3px; padding:9px 0; } .filter-button { padding:7px 10px; font-size:.76rem; } .filter-button span { margin-left:5px; } .work-meta { flex-direction:row; } .work-card h2 { font-size:1.15rem; } .dialog-toolbar { padding:10px 17px; } #case-title { font-size:1.5rem; } .case-visual { aspect-ratio:16/9; } .profile-details { grid-template-columns:1fr; } .detail-value { white-space:normal; overflow-wrap:anywhere; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
@media(max-width:560px) { .timeline-track { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; } .timeline-track::before { display:none; } .timeline-year { white-space:nowrap; font-size:.7rem; } .timeline-title { font-size:.75rem; } .timeline-desc { font-size:.68rem; } }
/* 简化列表，只展示作品本身。 */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.page-links { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; padding:12px 0 20px; letter-spacing:0; }
.page-links .button { min-height:37px; padding:7px 13px; background:transparent; border-color:#344055; color:#bac8dc; font-size:.78rem; font-weight:400; }
.page-links .button:hover { background:#182235; color:#e4edfa; }
.page-links .button:disabled { color:#64748b; border-color:#263044; cursor:default; background:transparent; }
.profile-card { margin-bottom:28px; }
.work-filters { margin-bottom:28px; }
.work-grid { gap:34px 28px; padding-bottom:44px; }
.work-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px 14px; margin-top:15px; width:100%; }
.work-project { font-size:.72rem; color:#899bb6; }
.work-summary { margin:8px 0 0; }
.dialog-toolbar { justify-content:flex-end; }
@media(max-width:560px) { .page-links { justify-content:flex-end; gap:6px; } .page-links .button { padding:7px 9px; font-size:.73rem; } .work-filters { margin-bottom:22px; } .work-grid { gap:28px; } .work-heading { gap:4px 10px; } }


.case-chapter { border-top:1px solid #34455e; margin-top:32px; padding-top:24px; }
.case-chapter-title { font-size:1.2rem; margin-bottom:20px; color:#e2e8f0; }
.case-description { line-height:1.95; margin-bottom:20px; }

.personal-divider{grid-column:1/-1;border-top:1px solid rgba(156,177,204,.25);margin-top:28px;padding-top:30px}.personal-divider h2{font-size:24px;font-weight:600;margin:0 0 4px;color:#dce6f5}.text-cover{display:flex;align-items:center;justify-content:center;background:#101923;color:#8e9eb2;font-size:24px;letter-spacing:.1em}

.sliced-cover{isolation:isolate;background:#090b0d}
.cover-slice{position:absolute;inset:0;overflow:hidden}
.cover-slice img{position:absolute;height:100%;width:40%;object-fit:cover}
.slice-0{clip-path:polygon(0 0,27% 0,17% 100%,0 100%)}
.slice-1{clip-path:polygon(27% 0,47% 0,37% 100%,17% 100%)}
.slice-2{clip-path:polygon(47% 0,67% 0,57% 100%,37% 100%)}
.slice-3{clip-path:polygon(67% 0,83% 0,73% 100%,57% 100%)}
.slice-4{clip-path:polygon(83% 0,100% 0,100% 100%,73% 100%)}
.slice-0 img{left:-7%}.slice-1 img{left:12%}.slice-2 img{left:32%}.slice-3 img{left:51%}.slice-4 img{left:68%;object-position:70% center}