* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', sans-serif;
  background: white;
  color: black;
  overflow-x: hidden;
}




/* Black line divider above section */
.section-divider{
  border:0;
  height:1px;               /* line thickness */
  background:#000;          /* solid black */
  width:100%;
  margin:0;                 /* flush with edges; adjust if needed */
}



/* Optional: add spacing below the line before the section starts */
.work{
  padding-top:1rem;         /* adjust to taste */
  
}

/* If your page has side gutters, wrap the hr so it spans edge-to-edge */
.full-bleed{
  width:100vw;
  
  margin-left:50%;
  transform:translateX(-50%);
}


.work__container{
  max-width:auto;
  margin-inline:auto;
}

.work__title{
  text-align:center;
  font-size:6rem;
  font-weight:500;
font-family: "Poiret One", sans-serif;
  height:250px;
  padding-top:55px;
  padding-left:0px;
  margin:0 0 36px;
  background-color:#f2f2f2;
  letter-spacing:-.02em;
}

/* Media Queries for larger screens */
@media (max-width: 768px) {
  .work__title {
    font-size:1rem;
    
    padding-left: 2rem;
    text-align: center;
  }
}

@media (max-width: 1200px) {
  .work__title {
    font-size:5rem;
    padding-left:0rem;
  }
}

:root{
  --radius:14px;
  --view-bg:#000000e0;   /* near-black pill */
  --view-text:#ffffff;
  --shadow-lg:0 12px 40px rgba(0,0,0,.16);
  --shadow-sm:0 6px 20px rgba(0,0,0,.12);
}

/* Grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* Card structure */
.card{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding-top:20px;
  padding-left:30px;
  padding-right:30px;
  margin-bottom: 100px;
}

/* Media + image */
.card__media{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#0a0a0a;
  box-shadow:var(--shadow-lg);
  isolation:isolate;
}
.card__media img{
  display:block;
  width:100%;
  height:360px;
  object-fit:cover;
  transition:transform .6s, filter .6s;
}
@media (max-width:640px){
  .card__media img{height:300px}
}

/* Vignette overlay */
.card__media::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 55%, transparent 40%, rgba(0,0,0,.38) 100%);
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
  z-index:1; /* sits above image, below button */
}

/* View button (link) */
.card__view{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.9);
  padding:18px 28px;
  border-radius:999px;
  background:var(--view-bg);
  color:var(--view-text);
  text-decoration:none;
  font-weight:700; letter-spacing:.02em;
  box-shadow:var(--shadow-sm);
  opacity:0;
  transition:opacity .28s ease, transform .35s cubic-bezier(.2,.9,.2,1);
  backdrop-filter:saturate(120%) blur(4px);
  z-index:2; /* above vignette */
}

/* Smooth image zoom and vignette fade */
.card__media:hover img,
.card__media:focus-within img {
  transform: scale(1.05);
  filter: brightness(1.05) saturate(110%);
}

/* Vignette appears smoothly */
.card__media:hover::after,
.card__media:focus-within::after {
  opacity: 1;
}

/* Reveal and animate View button */
.card__media:hover .card__view,
.card__media:focus-within .card__view {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

/* Extra polish on View button */
.card__view {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--view-bg);
  color: var(--view-text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1),
    box-shadow 0.35s ease;
  backdrop-filter: saturate(120%) blur(5px);
  z-index: 2;
}

/* On hover, elevate the button */
.card__media:hover .card__view,
.card__media:focus-within .card__view {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}



/* Accessibility */
.card__view:focus-visible{outline:3px solid #8b5cf6; outline-offset:3px}

/* Meta */
.card__meta{display:flex;align-items:center;gap:100px;flex-wrap:wrap;padding-left:14px;font-family: "Poiret One", sans-serif;}
.card__title{font-size:1.5rem;margin:0;font-weight:600}
.card__title-link{color:inherit;text-decoration:none}
.card__title-link:focus-visible{outline:2px solid #8b5cf6;outline-offset:3px}
.pill1{font-size:1.3rem;font-weight:600;padding:8px 10px;border-radius:999px;background:#f3f4f6;color:#111;margin-left:60px;}
.pill2{font-size:1.3rem;font-weight:600;padding:8px 10px;border-radius:999px;background:#f3f4f6;color:#111;margin-left: 90px;}
.pill3{font-size:1.3rem;font-weight:600;padding:8px 10px;border-radius:999px;background:#f3f4f6;color:#111;margin-left:20px;}


@media (max-width: 1024px) {
  .card {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom:190px;
  }

  .card__meta {
    gap: 60px;
  }

  .pill1,
  .pill2,
  .pill3 {
    margin-left: 30px;
  }
}

@media (max-width: 768px) {
  .card {
    padding-left: 16px;
    padding-right: 16px;
  margin-bottom:70px;
  }

  .card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-left: 10px;
  }

  .pill1,
  .pill2,
  .pill3 {
    margin-left: 0;
  }

  .card__title {
    font-size: 1.3rem;
  }

  .pill1,
  .pill2,
  .pill3 {
    font-size: 1.1rem;
    padding: 6px 10px;
  }
}

@media (max-width: 480px) {
  .card__title {
    font-size: 1.1rem;
  }

  .pill1,
  .pill2,
  .pill3 {
    font-size: 1rem;
    padding: 5px 8px;
  }

  .card__view {
    padding: 14px 22px;
    font-size: 14px;
  }

  .card__media img {
    height: 240px;
  }
}