.project-gallery { max-width: 1280px; margin: auto; padding: 56px 40px 80px; }
.gallery-intro { max-width: 780px; margin-bottom: 56px; }
.gallery-intro h1 { font-size: clamp(30px, 4vw, 48px); margin: 16px 0; letter-spacing: -.04em; }
.gallery-intro p { color: #b4b4bf; font-size: 18px; line-height: 1.7; max-width: 650px; }
.collection-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 25px; }
.project-gallery a { color: var(--secondary-color); text-underline-offset: 4px; }
.collection-links a { font-size: 14px; text-decoration: none; }
.collection-links a:hover { text-decoration: underline; }
.nav-link[aria-current="page"] { color: var(--main-color); }
.project-collection { margin-top: 44px; scroll-margin-top: 24px; border-top: 1px solid #ffffff20; padding-top: 26px; }
.collection-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.collection-title { display: flex; align-items: center; gap: 13px; }
.collection-title > i { color: #ffffff; font-size: 25px; }
.collection-title h2 { font-size: clamp(21px, 3vw, 26px); }
.collection-description { color: #aaaab6; line-height: 1.5; margin-top: 8px; }
.collection-number { color: var(--main-color); font-size: 13px; }
.carousel-controls { display: flex; gap: 8px; flex-shrink: 0; }
.carousel-controls button { width: 42px; height: 42px; border: 1px solid #5d80d370; border-radius: 50%; background: #191923; color: var(--secondary-color); font: inherit; font-size: 22px; cursor: pointer; transition: background .2s, border-color .2s; }
.carousel-controls button:hover:not(:disabled) { background: #283451; border-color: var(--main-color); }
.carousel-controls button:disabled { opacity: .3; cursor: default; }
.project-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-color: #5d80d3 #20202b; scrollbar-width: thin; padding: 4px 2px 18px; }
.project-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #1b1c28f2; border: 1px solid #ffffff1c; border-radius: 12px; scroll-snap-align: start; transition: border-color .2s, transform .2s; }
.project-card:hover, .project-card:focus-within { border-color: #5d80d3a0; transform: translateY(-3px); }
.project-art { aspect-ratio: 16 / 9; background: radial-gradient(ellipse at top right, #34476b, transparent 70%), #151723; display: grid; place-items: center; position: relative; overflow: hidden; border-bottom: 1px solid #ffffff12; }
.project-art > i { color: #8da8e4; font-size: 52px; }
.project-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.project-collection[data-kind="github"] .project-art img { object-fit: contain; padding: 18px; background: #181a27; }
.project-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.project-meta { color: #a5b9e5; font-size: 12px; line-height: 1.5; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.project-card h3 { font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; }
.project-card h3 a { color: #f4f4fa; text-decoration: none; }
.project-card h3 a:hover { color: var(--secondary-color); }
.project-card p { color: #b4b4bf; font-size: 14px; line-height: 1.65; margin: 12px 0 22px; overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.project-action { margin-top: auto; font-size: 14px; text-decoration: none; align-self: flex-start; }
.project-action:hover { text-decoration: underline; }
.collection-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 12px; color: #aaaab6; font-size: 12px; }
.collection-footer a { text-decoration: none; }
.collection-message { padding: 28px; color: #b4b4bf; line-height: 1.7; background: #1b1c28; border-radius: 10px; }
.project-gallery :focus-visible, .projects-page header :focus-visible { outline: 2px solid var(--secondary-color); outline-offset: 4px; }
@media (max-width: 1000px) { .project-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 600px) {
    .project-gallery { padding: 35px 18px 50px; }
    .gallery-intro { margin-bottom: 36px; }
    .project-track { grid-auto-columns: 88%; gap: 14px; }
    .collection-heading { align-items: flex-start; gap: 10px; }
    .collection-title { gap: 8px; }
    .collection-title > i { font-size: 20px; }
    .collection-description { font-size: 13px; }
    .carousel-controls { gap: 5px; }
    .carousel-controls button { width: 34px; height: 34px; }
    .project-body { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .project-card, .carousel-controls button { transition: none; } .project-card:hover, .project-card:focus-within { transform: none; } }