.projects { min-height: 1060px; background: #070707; }
.project-browser { display: grid; grid-template-columns: 450px minmax(0, 1fr); gap: 56px; align-items: stretch; }
.project-rail { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line); }
.project-tab { appearance: none; width: 100%; display: grid; grid-template-columns: 44px 1fr; align-items: center; padding: 27px 4px; border: 0; border-bottom: 1px solid var(--line); color: #6b6b70; background: transparent; font: inherit; font-size: 23px; letter-spacing: -.035em; text-align: left; cursor: pointer; transition: color .24s ease, padding-left .24s ease; }
.project-tab span { color: #4e4e53; font-size: 9px; letter-spacing: .14em; transition: color .24s ease; }
.project-tab:hover, .project-tab.is-active { color: #fff; padding-left: 12px; }
.project-tab:hover span, .project-tab.is-active span { color: var(--orange); }
.project-preview-stage { position: relative; min-height: 610px; }
.project-preview { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #111; opacity: 0; visibility: hidden; transform: translateY(6px); box-shadow: 0 35px 90px rgba(0,0,0,.48); transition: opacity .26s ease, transform .26s ease, visibility .26s; }
.project-preview.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.project-preview:hover { transform: translateY(-5px); }
.project-preview > img { width: 100%; height: 100%; object-fit: cover; }
.preview-overlay { position: absolute; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 70px 34px 32px; background: linear-gradient(to top, rgba(3,3,4,.96), rgba(3,3,4,.68) 55%, transparent); }
.preview-overlay span { color: var(--orange); font-size: 8px; letter-spacing: .18em; }
.preview-overlay p { margin: 9px 0 0; color: #a3a3a6; font-size: 12px; }
.preview-overlay a { flex: 0 0 auto; padding: 13px 17px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-family: Arial,"PingFang SC","Microsoft YaHei",sans-serif; font-size: 14px; font-weight: 950; letter-spacing: .08em; transition: background .2s ease, color .2s ease; }
.preview-overlay a:hover { background: #fff; color: #111; }