/* ============================================================
   CATEGORY NAVIGATION — four equal cards, one row, no guessing
   ============================================================ */
.cats{padding-block:var(--space-lg) 0}

.ccards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.15vw,20px)}

.ccard{display:grid;gap:14px;align-content:start}
.ccard__media{
  display:block;position:relative;overflow:hidden;background:var(--ivory);aspect-ratio:4/5;border-radius:var(--radius-md);
}
.ccard__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--slow),filter .4s var(--ease);
}
.ccard__media::after{
  content:"";position:absolute;inset:0;background:rgba(26,18,10,0);
  transition:background .4s var(--ease);
}
.ccard:hover .ccard__media img{transform:scale(1.035)}
.ccard:hover .ccard__media::after{background:rgba(26,18,10,.08)}

.ccard__foot{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.ccard__n{
  font-family:var(--display);font-weight:300;font-size:var(--d4);line-height:1;letter-spacing:-.015em;
}
.ccard__go{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-45);
  transition:color .35s var(--ease);
}
.ccard__go svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3;
  transition:transform .45s var(--slow)}
.ccard:hover .ccard__go{color:var(--ink)}
.ccard:hover .ccard__go svg{transform:translateX(5px)}
.ccard:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* tablet: two up */
@media (max-width:1024px){
  .ccards{grid-template-columns:repeat(2,1fr);gap:clamp(11px,1.55vw,18px)}
}

/* phone: four cards is not enough to hide three behind a swipe, so they stack.
   The picture goes landscape to keep the column from running away, and the
   "all categories" link moves under them, where it reads as the next step. */
@media (max-width:700px){
  .ccards{
    display:grid;grid-template-columns:1fr;gap:clamp(14px,3.6vw,20px);
    overflow:visible;scroll-snap-type:none;
    margin-inline:0;padding-inline:0;margin-block:0;padding-block:0;
  }
  /* the caption sits in the picture, on a gradient just dark enough to read
     against — the card is then exactly as tall as its photograph */
  .ccard{flex:none;gap:0;position:relative;isolation:isolate}
  .ccard__media{aspect-ratio:1/1}
  /* The scrim lives on the caption, not on .ccard__media::after — that pseudo
     element is the reveal curtain for [data-rv-img], and .in collapses it with
     scaleY(0), which silently took any fill put there down with it. */
  .ccard__foot{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    align-items:flex-end;padding:132px 26px 26px;color:var(--on-dark);
    /* A cosine falloff rather than a straight ramp: the slope is flat at both
       ends, so neither the foot of the card nor the top of the scrim shows an
       edge. Sized against the four photographs rather than by eye: the
       caption band needs about 0.3 alpha to clear 3:1 on the brightest of
       them. Above the halfway mark the scrim is under 0.1, so the photograph
       is not dimmed — only the strip the words sit on. */
    background:linear-gradient(to top,
      rgba(0,0,0,0.440) 0%,
      rgba(0,0,0,0.429) 10%,
      rgba(0,0,0,0.398) 20%,
      rgba(0,0,0,0.349) 30%,
      rgba(0,0,0,0.288) 40%,
      rgba(0,0,0,0.220) 50%,
      rgba(0,0,0,0.152) 60%,
      rgba(0,0,0,0.091) 70%,
      rgba(0,0,0,0.042) 80%,
      rgba(0,0,0,0.011) 90%,
      rgba(0,0,0,0.000) 100%);
    /* the scrim is a child of .ccard, outside the picture's own clipping, so it
       has to carry the same bottom corners or it squares the card off */
    border-bottom-left-radius:var(--radius-md);
    border-bottom-right-radius:var(--radius-md);
  }
  /* the card is a full-width square here, and the shared --d4 card title was
     sized for a tile a quarter of this width — it read as a footnote under a
     photograph. The clamp holds the name between 34 and 40px at every phone
     width. The serif and the weight are the ones it already had. */
  .ccard__n{
    color:var(--on-dark);
    font-size:clamp(1.625rem,7vw,1.875rem);
    line-height:.98;
  }
  .ccard__go,.ccard:hover .ccard__go{color:rgba(242,237,230,.82)}
}

@media (prefers-reduced-motion:reduce){
  .ccard__media img{transition:none}
}