/* ── WORK PAGE OVERRIDES ── */

 /* Page hero — compact, not fullscreen */
 #work-hero {
     padding: 180px 52px;
     max-width: 80%;
     margin: 0 auto;
 }

 .work-hero-meta {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 32px;
 }

 /* Filter bar */
 .filter-bar {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     padding: 40px 52px;
     max-width: 80%;
     margin: 0 auto;
 }

 .filter-btn {
     font-family: 'Inter', sans-serif;
     font-size: rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--muted);
     background: none;
     border: 1px solid rgba(240, 235, 225, .12);
     padding: 9px 20px;
     cursor: pointer;
     transition: color .3s, border-color .3s, background .3s;
 }

 .filter-btn:hover {
     color: var(--white);
     border-color: rgba(240, 235, 225, .3);
 }

 .filter-btn.active {
     color: var(--ink);
     background: var(--bronze);
     border-color: var(--bronze);
 }

 /* Full-bleed project list */
 .projects-list {
     max-width: 80%;
     margin: 0 auto;
     padding: 0 52px 120px;
 }

 .project-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2px;
     margin-bottom: 2px;
     opacity: 0;
     transform: translateY(32px);
     transition: opacity .8s ease, transform .8s ease;
 }

 .project-row.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .project-card {
     position: relative;
     overflow: hidden;
     background: #111;
     aspect-ratio: 4/3;
     cursor: pointer;
     display: block;
     text-decoration: none;
 }

 .project-visual {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* Card overlay on hover */
 .project-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(6, 5, 12, .93) 0%, rgba(6, 5, 12, .3) 50%, transparent 100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 32px;
     opacity: 0;
     transform: translateY(6px);
     transition: opacity .4s ease, transform .4s ease;
 }

 /* Always show overlay on touch/mobile */
 @media (hover: none) {
     .project-overlay {
         opacity: 1;
         transform: translateY(0);
         background: linear-gradient(to top, rgba(6, 5, 12, .88) 0%, transparent 55%);
     }
 }

 .project-card:hover .project-overlay {
     opacity: 1;
     transform: translateY(0);
 }

 .project-tag {
     font-size: .8rem;
     letter-spacing: .24em;
     text-transform: uppercase;
     color: var(--white);
     margin-bottom: 10px;
 }

 .project-title {
     font-family: 'Inter', sans-serif;
     font-size: clamp(1.1rem, 2vw, 1.5rem);
     font-weight: 400;
     color: var(--white);
     line-height: 1.25;
     margin-bottom: 16px;
 }

 .project-cta {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: .8rem;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--white);
     border: 1px solid rgba(240, 235, 225, .3);
     padding: 10px 20px;
     align-self: flex-start;
     transition: border-color .3s, color .3s;
 }

 /* Index number — always visible top-right */
 .project-index {
     position: absolute;
     top: 20px;
     right: 20px;
     font-size: .75rem;
     letter-spacing: .2em;
     color: rgba(240, 235, 225, .25);
     font-weight: 300;
     z-index: 2;
 }

 /* ── DIVIDER BETWEEN LIST AND CTA ── */
 .work-divider {
     max-width: 80%;
     margin: 0 auto;
     padding: 0 52px 80px;
     border-top: 1px solid rgba(240, 235, 225, .07);
 }

 /* ── RESPONSIVE WORK PAGE ── */
 @media (max-width: 768px) {
     #work-hero {
         padding: 120px 24px 60px;
         max-width: 100%;
     }

     .filter-bar {
         padding: 24px;
         max-width: 100%;
         gap: 10px;
     }

     .projects-list {
         max-width: 100%;
         padding: 0 24px 60px;
     }

     /* Stack projects into one column */
     .project-row {
         grid-template-columns: 1fr;
         gap: 16px;
         margin-bottom: 16px;
     }

     /* Slightly taller cards for mobile */
     .project-card {
         aspect-ratio: 4 / 5;
     }

     /* Better fitting overlay */
     .project-overlay {
         opacity: 1;
         transform: translateY(0);
         padding: 20px;
         justify-content: flex-end;
         background: linear-gradient(to top,
                 rgba(6, 5, 12, 0.88) 0%,
                 rgba(6, 5, 12, 0.45) 50%,
                 transparent 100%);
     }

     .project-tag {
         font-size: 0.7rem;
         margin-bottom: 6px;
     }

     .project-title {
         font-size: 1.15rem;
         line-height: 1.3;
         margin-bottom: 12px;
     }

     .project-cta {
         font-size: 0.7rem;
         padding: 8px 14px;
         gap: 6px;
     }

     .project-index {
         top: 16px;
         right: 16px;
         font-size: 0.7rem;
     }

     .work-divider {
         max-width: 100%;
         padding: 0 24px 60px;
     }
 }