/* ONLYDROP v66 — exact index lettering, scaled in place + subtle city artwork.
   All palette and card shapes are retained from v65. */

/* Cropped user artwork: fixed ambient plane under all index content.
   No animation or mouse tracking; fades into the existing dark background. */
html body #home .index-screen {
  position: relative !important;
  isolation: isolate;
}
html body #home .index-atmosphere {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(520px, 76svh, 890px);
  background-image:
    linear-gradient(90deg, rgba(11,16,21,.65) 0%, rgba(11,16,21,.35) 48%, rgba(11,16,21,.67) 100%),
    linear-gradient(180deg, rgba(11,16,21,.12) 0%, rgba(11,16,21,.14) 35%, rgba(11,16,21,.75) 79%, #0b1015 100%),
    url('assets/art/index-city-v66.webp');
  background-position: center center, center center, center 18%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .72;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.72) 66%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.72) 66%, transparent 100%);
}
/* The legacy stock city is hidden so two different city images do not overlap. */
html body #home .od-collage .od-city { display: none !important; }
html body #home .index-topline,
html body #home .index-intro,
html body #home .menu-heading,
html body #home .category-menu,
html body #home .index-footer { position: relative; z-index: 3; }

/* Both inner headings use the ORIGINAL index lettering clone; this file
   adjusts only their container's placement. Child styles stay untouched. */
html body #work[data-cat="storyboard"] .section-heading > div,
html body #work[data-cat="projects"] .section-heading > div {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
html body #work[data-cat="storyboard"] #workHeading,
html body #work[data-cat="projects"] #workHeading {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  transform: none !important;
}
html body #work #workHeading .work-lettering-stage {
  display: block !important;
  position: relative !important;
  transform-origin: left top !important;
  transform: scale(var(--type-fit-x,1)) !important;
  transition: none !important;
  animation: none !important;
}
/* Respect their existing composition rail; give the lettering some air. */
html body #work[data-cat="storyboard"] .section-heading > div {
  padding: 12px 18px 20px 12px !important;
}
html body #work[data-cat="projects"] .section-heading > div {
  padding: 8px 6px 12px 4px !important;
  align-self: center !important;
}
@media (max-width: 700px) {
  html body #home .index-atmosphere {
    height: clamp(430px, 65svh, 690px);
    opacity: .52;
    background-position: center, center, 50% 20%;
  }
  html body #work[data-cat="storyboard"] .section-heading > div {
    padding: 8px 7px 13px 7px !important;
  }
  html body #work[data-cat="projects"] .section-heading > div {
    padding: 5px 2px 9px 2px !important;
  }
}