/* ONLYDROP v77 — index hero hierarchy.
   More emphasis for Matias Cid / Onlydrop, without changing category cards.
   No extra gradients, filters or ornamental rules. */
html body #home .index-intro {
  grid-template-columns:minmax(0,1.28fr) minmax(0,1.05fr) minmax(0,.29fr) !important;
  gap:clamp(16px,2.05vw,34px) !important;
  min-height:clamp(220px,26vh,290px) !important;
  position:relative !important;
  isolation:isolate !important;
}
html body #home .index-name-block {
  min-width:0 !important;
  width:100% !important;
}
/* v161 — A horizontal shade over the BACKGROUND on the left side of
   the hero, spanning the title zone only (not the entire page).
   It belongs to the hero section, outside the name's animated clip-path.
   It starts at the viewport's left edge and fades toward the bio.
   The lettering itself is completely untouched. */
html body #home .index-intro::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:calc(-1 * clamp(24px,3.35vw,68px)) !important;
  right:auto !important;
  top:-24px !important;
  bottom:auto !important;
  width:min(66vw,1040px) !important;
  height:calc(100% + 48px) !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:linear-gradient(
    90deg,
    rgba(6,11,16,.65) 0%,
    rgba(6,11,16,.47) 23%,
    rgba(6,11,16,.25) 52%,
    rgba(6,11,16,.09) 76%,
    transparent 100%
  ) !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 83%,transparent 100%) !important;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 17%,#000 83%,transparent 100%) !important;
  border:0 !important;
  box-shadow:none !important;
}
@media (max-width:900px) {
  html body #home .index-intro::before {
    left:-5vw !important;
    width:82vw !important;
  }
}
@media (max-width:700px) {
  html body #home .index-intro::before {
    top:-18px !important;
    height:clamp(140px,24vh,205px) !important;
    width:100vw !important;
    background:linear-gradient(90deg,rgba(6,11,16,.57),rgba(6,11,16,.27) 54%,transparent 100%) !important;
  }
}
html body #home .index-name-block h1.index-name-lockup {
  --lockup-fit-width:620;
  display:block !important;
  width:min(100%,620px) !important;
  max-width:100% !important;
  margin:0 0 4px !important;
  padding:0 !important;
  overflow:visible !important;
  opacity:1 !important;
  rotate:0deg !important;
  transform:none !important;
}
html body #home .index-name-lockup .name-line-primary {
  font-family:'Dirtyline36','Bricolage Grotesque',sans-serif !important;
  font-size:clamp(75px,6.6vw,103px) !important;
  line-height:.82 !important;
  color:#f1e8dd !important;
  -webkit-text-fill-color:#f1e8dd !important;
  text-shadow:none !important;
  transform:scaleX(var(--od-name-scale-primary,1)) !important;
  transform-origin:left center !important;
}
html body #home .index-name-lockup .name-line-secondary {
  font-family:'Dirtyline36','Bricolage Grotesque',sans-serif !important;
  font-size:clamp(69px,6.1vw,97px) !important;
  line-height:.82 !important;
  color:#e9af9e !important;
  -webkit-text-fill-color:#e9af9e !important;
  text-shadow:none !important;
  margin-top:11px !important;
  transform:scaleX(var(--od-name-scale-secondary,1)) !important;
  transform-origin:left center !important;
}
html body #home .index-name-block .index-alias {
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  font:600 clamp(12px,1.05vw,15px)/1.45 'IBM Plex Mono','Manrope',monospace !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
  color:#c7d1d3 !important;
  margin:12px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  white-space:nowrap !important;
  transform:none !important;
  opacity:1 !important;
}
html body #home .index-name-block .index-alias .alias-rule {
  display:none !important;
  content:none !important;
}
@media (max-width:1100px) {
  html body #home .index-intro {
    grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) !important;
    gap:clamp(18px,2.4vw,30px) !important;
    min-height:230px !important;
  }
  html body #home .index-name-block h1.index-name-lockup {
    --lockup-fit-width:500;
    width:min(100%,500px) !important;
  }
  html body #home .index-name-lockup .name-line-primary {
    font-size:clamp(59px,7vw,82px) !important;
  }
  html body #home .index-name-lockup .name-line-secondary {
    font-size:clamp(54px,6.55vw,76px) !important;
  }
  html body #home .index-name-block .index-alias {
    font-size:clamp(11px,1.1vw,13px) !important;
    letter-spacing:.075em !important;
  }
}
@media (max-width:700px) {
  html body #home .index-intro {
    grid-template-columns:minmax(0,1fr) !important;
    gap:clamp(15px,3vw,22px) !important;
    min-height:0 !important;
    padding:18px 0 22px !important;
  }
  html body #home .index-name-block h1.index-name-lockup {
    --lockup-fit-width:445;
    width:min(100%,445px) !important;
    margin-bottom:2px !important;
  }
  html body #home .index-name-lockup .name-line-primary {
    font-size:clamp(49px,12.1vw,69px) !important;
    line-height:.85 !important;
  }
  html body #home .index-name-lockup .name-line-secondary {
    font-size:clamp(45px,11.1vw,64px) !important;
    margin-top:8px !important;
    line-height:.85 !important;
  }
  html body #home .index-name-block .index-alias {
    font-size:clamp(10.5px,2.95vw,13px) !important;
    letter-spacing:.085em !important;
    margin-top:11px !important;
  }
}
@media (max-height:720px) and (min-width:1101px) {
  html body #home .index-intro {min-height:196px !important;}
  html body #home .index-name-lockup .name-line-primary {font-size:clamp(70px,6vw,90px) !important;}
  html body #home .index-name-lockup .name-line-secondary {font-size:clamp(65px,5.6vw,85px) !important;}
  html body #home .index-name-block .index-alias {margin-top:8px !important;}
}

/* v164 — The city reaches farther down before blending into the WHITE base, not into a dark
   vignette followed by an unrelated white overlay. The background and image
   mask share the same vertical transition and preserve the existing crop.
   The gradient is behind all portfolio media, cards, and interface elements. */
html body #views #home .index-screen {
  background-color:#f3f4f1 !important;
  background-image:linear-gradient(
    to bottom,
    #0b1015 0,
    #151f26 18svh,
    #3a4852 40svh,
    #98a4aa 59svh,
    #d9dfdf 73svh,
    #f3f4f1 88svh,
    #f3f4f1 100%
  ) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}

/* Remove the old BLACK matte that was burned into the lower image.
   Shift the artwork upward so the full row of characters stays above the portfolio cards,
   while retaining responsive framing and the original lower fade. */
html body #views #home .index-atmosphere {
  height:clamp(540px,74svh,830px) !important;
  background-image:url('assets/art/BG.png') !important;
  background-size:100% auto !important;
  background-position:50% calc(-1 * clamp(160px, 12vw, 270px)) !important;
  background-repeat:no-repeat !important;
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,#000 43%,
    rgba(0,0,0,.93) 53%,
    rgba(0,0,0,.61) 71%,
    rgba(0,0,0,.18) 88%,
    transparent 100%
  ) !important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,#000 43%,
    rgba(0,0,0,.93) 53%,
    rgba(0,0,0,.61) 71%,
    rgba(0,0,0,.18) 88%,
    transparent 100%
  ) !important;
}

/* On mobile the hero photo is shorter than the scrollable index, so
   use fixed viewport heights rather than percentages of the long page. */
@media (max-width:700px) {
  html body #views #home .index-screen {
    background-image:linear-gradient(
      to bottom,
      #0b1015 0,
      #1a242b 15svh,
      #52656d 30svh,
      #b1bec2 49svh,
      #e7ebeb 64svh,
      #f3f4f1 80svh,
      #f3f4f1 100%
    ) !important;
  }
  html body #views #home .index-atmosphere {
    height:clamp(440px,64svh,620px) !important;
    background-size:auto clamp(440px, 72svh, 720px) !important;
    background-position:50% calc(-1 * clamp(110px, 17svh, 210px)) !important;
    -webkit-mask-image:linear-gradient(
      to bottom,#000 0%,#000 40%,rgba(0,0,0,.84) 52%,
      rgba(0,0,0,.38) 77%,transparent 100%
    ) !important;
    mask-image:linear-gradient(
      to bottom,#000 0%,#000 40%,rgba(0,0,0,.84) 52%,
      rgba(0,0,0,.38) 77%,transparent 100%
    ) !important;
  }
}

/* Footer remains readable against the new light lower background. */
html body #views #home .index-footer.od-footer-v76,
html body #views #home .index-footer.od-footer-v76 .od-footer-contact a,
html body #views #home .index-footer.od-footer-v76 .od-social-links a {
  color:#243239 !important;
}
html body #views #home .index-footer.od-footer-v76 .od-footer-contact a:hover,
html body #views #home .index-footer.od-footer-v76 .od-social-links a:hover {
  color:#355620 !important;
}