/* Projects page — refines the existing flip-card grid to the navy/gold
   palette and Home/About typography. Interaction, grid, images, and content
   are untouched; this only restyles colors, borders, and type. */

/* styles.css's .container is capped at 1140px — widen it here to match the
   1320px content width used by the shared nav and .page-hero on this page,
   so the grid isn't narrower than the heading above it. Scoped to .container
   inside <main> only, so the footer's .container is untouched. */
main .container{max-width:1320px; padding:0 44px;}

/* The grid sits in a bare <section>, which picks up styles.css's global
   section{padding:64px 0} — same bug pattern fixed on Contact. That was
   pushing the whole grid down well below the "Hover or tap..." line. */
main section{padding:0;}

.projects-grid{padding-top:16px; padding-bottom:96px;}

@media (max-width:900px){
  main .container{padding:0 22px;}
}

.flip-card-inner{
  border:1px solid var(--border);
  box-shadow:none;
  transition:transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flip-card-front .card-caption{
  background:linear-gradient(to top, rgba(23,38,53,0.92), rgba(23,38,53,0));
}
.flip-card-front .card-caption .year{
  color:var(--brand-gold); font-family:'Inter', sans-serif;
  letter-spacing:0.04em; text-transform:uppercase; font-size:0.75rem;
}
.flip-card-front .card-caption .title{
  font-family:'Inter', sans-serif; font-weight:600;
}

.flip-card-back{
  background:var(--brand-navy);
}
.flip-card-back .year{
  color:var(--brand-gold); font-family:'Inter', sans-serif;
  letter-spacing:0.04em; text-transform:uppercase; font-size:0.75rem;
}
.flip-card-back .title{
  font-family:'Cormorant Garamond', ui-serif, Georgia, serif;
  font-weight:600; font-size:1.2rem;
}
.flip-card-back .tags{color:var(--brand-gold);}