/* ONLYDROP v165 — Shared skewed index grid.
   A SINGLE affine transform bends the whole media grid, so adjacent seams
   retain identical angles. Independent card tilts, corner cuts and hover
   transforms no longer break those alignments. Work pages are untouched. */

/* Maintain rigid card borders after the intro finishes; the staged entrance
   animation from index-entrance-v80.css still runs during od-entry-playing. */
html:not(.od-entry-playing):not(.od-entry-armed) body #views #home .category-menu > a.category-card {
  animation:none !important;
}

html body #views #home .category-menu > a.category-card:nth-child(n),
html body #views #home .category-menu > a.category-card:nth-child(n):hover,
html body #views #home .category-menu > a.category-card:nth-child(n):focus-visible {
  rotate:0deg !important;
  transform:none !important;
  margin:0 !important;
}

/* No five unrelated shapes: use shared straight edges, bent by the parent
   grid. Keep clipping only the artwork, never the title or the whole link. */
html body #views #home .category-menu > a.category-card > .category-visual,
html body #views #home .category-menu > a.category-card:hover > .category-visual,
html body #views #home .category-menu > a.category-card:focus-visible > .category-visual {
  border-radius:0 !important;
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 100%) !important;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%) !important;
  transform:none !important;
}

/* Resting and hovered artwork must obey the same frame; keep media zoom,
   cross-to-edge hover flourish and preview slideshow working independently. */
html body #views #home .category-menu > a.category-card:hover > .category-visual,
html body #views #home .category-menu > a.category-card:focus-visible > .category-visual {
  filter:none !important;
}

@media (min-width:701px) {
  html body #views #home .category-menu {
    /* These shared angles apply to every column/row simultaneously. */
    --od-grid-skew-x:-2.1deg;
    --od-grid-skew-y:-1.25deg;
    --od-grid-reverse-x:2.1deg;
    --od-grid-reverse-y:1.25deg;
    transform:skewX(var(--od-grid-skew-x)) skewY(var(--od-grid-skew-y)) scale(.973) !important;
    transform-origin:50% 50% !important;
  }

  /* Counter-skew only the content, not the frame, to avoid distorted art
     and fonts while retaining the common angled boundary geometry. */
  html body #views #home .category-menu > a.category-card > h2.category-title {
    transform:skewY(var(--od-grid-reverse-y)) skewX(var(--od-grid-reverse-x)) !important;
    transform-origin:left top !important;
  }
  html body #views #home .category-menu > a.category-card > .category-visual > .category-slides {
    transform:scale(1.08) skewY(var(--od-grid-reverse-y)) skewX(var(--od-grid-reverse-x)) !important;
    transform-origin:center center !important;
  }

}

/* Two-column tablet grid: the same shared geometry, but slightly quieter. */
@media (min-width:701px) and (max-width:900px) {
  html body #views #home .category-menu {
    --od-grid-skew-x:-1.55deg;
    --od-grid-skew-y:-1.0deg;
    --od-grid-reverse-x:1.55deg;
    --od-grid-reverse-y:1.0deg;
    transform:skewX(var(--od-grid-skew-x)) skewY(var(--od-grid-skew-y)) scale(.972) !important;
  }
}

/* One-column phones: preserve the full width for the art. The same slight
   diagonal cut is repeated on every tile instead of skewing a very tall
   column and pushing its last cards outside the viewport. */
@media (max-width:700px) {
  html body #views #home .category-menu {
    transform:none !important;
  }
  html body #views #home .category-menu > a.category-card > .category-visual,
  html body #views #home .category-menu > a.category-card:hover > .category-visual,
  html body #views #home .category-menu > a.category-card:focus-visible > .category-visual {
    -webkit-clip-path:polygon(0 3.25%,100% 0,100% 96.75%,0 100%) !important;
    clip-path:polygon(0 3.25%,100% 0,100% 96.75%,0 100%) !important;
  }
}

/* Hover markers track the actual preview's computed clip-path through the
   existing category-edge-alignment-v151.js; no positioning JS is required. */