/* Dawn Tang portfolio shared styles */
html{scroll-behavior:auto}
body{margin:0;background:var(--bg-1);color:var(--fg-1);font-family:var(--font-sans)}
a{color:var(--fg-1);text-decoration:none;transition:color var(--dur-hover) var(--ease-out)}
a:hover{color:var(--accent-hover)}
.site-top{display:flex;justify-content:space-between;align-items:center;padding:var(--space-6) var(--margin-page) 0;position:relative;z-index:20}
.site-name{font-weight:600;font-size:17px;letter-spacing:-0.01em;color:var(--fg-1)}
.site-nav{display:flex;gap:8px}
.section{padding:0 var(--margin-page);margin-top:var(--gap-section)}
.footer{padding:var(--gap-section) var(--margin-page) var(--space-8);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.rail{display:flex;gap:24px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail-arrows{display:flex;gap:8px;justify-content:flex-end;margin-top:var(--space-4)}
.rail-arrow{width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid var(--line-1);background:transparent;color:var(--fg-1);font-size:18px;cursor:pointer;transition:background var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}
.rail-arrow:hover{background:var(--fg-1);color:#fff}
.media-frame{border-radius:var(--radius-media);overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow-card)}
.media-frame img,.media-frame video{display:block;width:100%;height:100%;object-fit:cover}
.hover-zoom img{transition:transform var(--dur-hover) var(--ease-out)}
.hover-zoom:hover img{transform:scale(1.03)}
.cs-hero{padding:var(--space-7) var(--margin-page) 0}
.cs-title{font-family:var(--font-sans);font-size:clamp(56px,9vw,150px);font-weight:640;letter-spacing:-0.045em;line-height:0.9;margin:var(--space-7) 0 0}
.cs-meta{display:flex;gap:var(--space-7);flex-wrap:wrap;margin-top:var(--space-6)}
.cs-meta div{max-width:34ch}
.cs-meta .dt-label{display:block;margin-bottom:6px;color:var(--fg-3)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
.next-project{display:block;padding:var(--space-9) var(--margin-page);border-top:1px solid var(--line-1);margin-top:var(--gap-section)}
.next-project .dt-label{color:var(--fg-3)}
.next-project h2{margin:8px 0 0}
figcaption{font-size:13px;color:var(--fg-2);margin-top:10px;line-height:1.5}
figure{margin:0}
:root{--proj-accent:var(--accent)}
.case-close{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;padding:var(--space-9) var(--margin-page);border-top:1px solid var(--line-1);margin-top:var(--gap-section)}
.case-close .cc-next{display:block;text-decoration:none;flex:1 1 auto}
.case-close .cc-next .dt-label{color:var(--proj-accent)}
.case-close .cc-next h2{margin:8px 0 0;font-size:clamp(44px,6vw,96px);letter-spacing:-0.04em;text-wrap:balance;color:var(--fg-1);transition:color var(--dur-hover) var(--ease-out)}
.case-close .cc-next:hover h2{color:var(--proj-accent)}
.case-close .cc-next p{margin:10px 0 0;max-width:34ch;color:var(--fg-2)}
.case-close .cc-index{color:var(--proj-accent);font-size:14px;font-weight:500;white-space:nowrap;padding-bottom:10px}
.case-close .cc-index:hover{color:var(--proj-accent);opacity:0.7}
.cs-meta .dt-label{color:var(--proj-accent)}
.footer .dt-label{white-space:nowrap}
.xcard-accent{height:4px;background:var(--proj-accent,var(--accent))}
.xcard-tags span.lead{background:var(--proj-accent);color:#fff}