/* ONLYDROP v178 — Solid black caption frames and nearly seamless shared grid.
   Only the homepage's small repeated title captions and category spacing
   change. The hero lettering, image previews and shared skew are preserved. */

/* Small secondary captions: solid black rectangle with crisp white lettering.
   No gradient vignette, blurred backdrop, or letter shadow. */
html body #views #home .category-menu > a.category-card > h2.category-title > .type-lettering-readable {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  box-sizing:border-box !important;
  position:relative !important;
  inset:auto !important;
  width:max-content !important;
  max-width:calc(100% - 12px) !important;
  min-width:0 !important;
  height:auto !important;
  padding:5px 9px !important;
  margin:clamp(5px,.65vh,8px) 0 0 0 !important;
  background:#07090c !important;
  background-color:#07090c !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-left:1px solid rgba(255,255,255,.10) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:#f1f3ef !important;
  -webkit-text-fill-color:#f1f3ef !important;
  opacity:1 !important;
  font-size:clamp(9px,.72vw,11px) !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  transform:none !important;
}

/* A tight, consistent gutter makes the angled boundaries feel like one
   coherent composition rather than five unrelated floating cards. */
@media (min-width:901px) {
  html body #views #home .category-menu {
    gap:2px !important;
    column-gap:2px !important;
    row-gap:2px !important;
  }
}
@media (min-width:701px) and (max-width:900px) {
  html body #views #home .category-menu {
    gap:2px !important;
    column-gap:2px !important;
    row-gap:2px !important;
  }
}
@media (max-width:700px) {
  html body #views #home .category-menu {
    gap:3px !important;
    column-gap:0 !important;
    row-gap:3px !important;
  }
  html body #views #home .category-menu > a.category-card > h2.category-title > .type-lettering-readable {
    font-size:9px !important;
    padding:5px 8px !important;
    max-width:calc(100% - 8px) !important;
  }
}

/* v184 — White-floor mirror, matched to the previews' actual geometry. */
html body #views #home .category-menu {
  -webkit-box-reflect:none !important;
  margin-bottom:0 !important;
}
html body #views #home .index-screen > canvas.od-floor-reflection {
  display:block !important;
  position:relative !important;
  z-index:4 !important;
  flex:0 0 clamp(54px,7.7vh,86px) !important;
  align-self:stretch !important;
  width:100% !important;
  height:clamp(54px,7.7vh,86px) !important;
  min-height:54px !important;
  max-height:86px !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
  opacity:.84 !important;
  filter:blur(1.5px) saturate(.78);
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.55) 25%,
    rgba(0,0,0,.24) 62%,
    transparent 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.55) 25%,
    rgba(0,0,0,.24) 62%,
    transparent 100%);
  background:transparent !important;
}
html.od-entry-armed:not(.motion-paused) body #views #home .index-screen > canvas.od-floor-reflection,
html.od-entry-playing:not(.motion-paused) body #views #home .index-screen > canvas.od-floor-reflection {
  opacity:0 !important;
}
html body #views #home .index-footer.od-footer-v76 {
  position:relative !important;
  z-index:8 !important;
}
@media (min-width:901px) and (max-height:740px) {
  html body #views #home .index-screen > canvas.od-floor-reflection {
    flex-basis:clamp(40px,6vh,55px) !important;
    height:clamp(40px,6vh,55px) !important;
    min-height:40px !important;
    max-height:55px !important;
  }
}
@media (max-width:700px) {
  html body #views #home .index-screen > canvas.od-floor-reflection {
    flex:0 0 60px !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;
    opacity:.72 !important;
  }
}