/* ONLYDROP v234 — Shared work chrome across all five disciplines.
   Single stable header, equal-height horizontal bar, no category transitions.
   Art 2D retains the existing All/Illustrations/Pixel Art/Sketchbook filters. */
html body #views #work[data-cat]:is([data-cat="animation2d"],[data-cat="animation3d"],[data-cat="art2d"],[data-cat="storyboard"],[data-cat="projects"]).view-panel{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scroll-snap-type:none!important;
  overscroll-behavior-y:contain;
}
html body #views #work[data-cat]:is([data-cat="animation2d"],[data-cat="animation3d"],[data-cat="art2d"],[data-cat="storyboard"],[data-cat="projects"]) > .work-section{
  display:block!important;
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  max-width:none!important;
  overflow:visible!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  grid-template-areas:none!important;
  padding:clamp(86px,10vh,116px) clamp(22px,3.5vw,75px) clamp(85px,9vw,140px) var(--padL)!important;
}
html body #views #work[data-cat] .work-topline{
  display:grid!important;
  position:sticky!important;
  grid-template-columns:max-content minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  justify-content:start!important;
  align-items:center!important;
  column-gap:clamp(12px,1.4vw,24px)!important;
  width:100%!important;
  min-height:0!important;
  height:76px!important;
  margin:0 0 clamp(14px,2vw,24px)!important;
  padding:0!important;
  top:clamp(10px,1.7vw,22px)!important;
  left:auto!important;
  right:auto!important;
  inset-inline:auto!important;
  z-index:95!important;
  border:0!important;
  border-bottom:0!important;
  background:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  animation:none!important;
  pointer-events:auto!important;
}
html body #views #work[data-cat] .work-topline > .back-index{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:start!important;
  align-self:center!important;
  position:relative!important;
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
  padding:9px 12px!important;
  background:#09090c!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:0!important;
  box-shadow:none!important;
  font:600 10px/1.2 var(--od-site-copy,'Manrope','Space Grotesk',Arial,sans-serif)!important;
  letter-spacing:.025em!important;
  white-space:nowrap!important;
  transform:none!important;
  pointer-events:auto!important;
}
html body #views #work[data-cat] .work-topline > .back-index:hover{
  color:#d1ff00!important;
  -webkit-text-fill-color:#d1ff00!important;
}
html body #views #work[data-cat] .work-topline > #workCounter{display:none!important}
html body #views #work[data-cat] .work-topline > .od-art2d-sticky-title{
  display:flex!important;
  grid-column:2!important;
  grid-row:1!important;
  position:relative!important;
  align-items:center!important;
  justify-content:flex-start!important;
  justify-self:start!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  overflow:visible!important;
  text-align:left!important;
  transform:none!important;
  rotate:none!important;
  scale:1!important;
  pointer-events:none!important;
}
html body #views #work[data-cat] .od-art2d-sticky-title > span{display:none!important}
html[lang="es"] body #views #work[data-cat][data-cat="art2d"] .od-art2d-sticky-title > .od-art-title-es,
html:not([lang="es"]) body #views #work[data-cat][data-cat="art2d"] .od-art2d-sticky-title > .od-art-title-en,
html[lang="es"] body #views #work[data-cat][data-cat="animation2d"] .od-art2d-sticky-title > .od-work-title-2d-es,
html:not([lang="es"]) body #views #work[data-cat][data-cat="animation2d"] .od-art2d-sticky-title > .od-work-title-2d-en,
html[lang="es"] body #views #work[data-cat][data-cat="animation3d"] .od-art2d-sticky-title > .od-work-title-3d-es,
html:not([lang="es"]) body #views #work[data-cat][data-cat="animation3d"] .od-art2d-sticky-title > .od-work-title-3d-en,
html body #views #work[data-cat][data-cat="storyboard"] .od-art2d-sticky-title > .od-work-title-story,
html[lang="es"] body #views #work[data-cat][data-cat="projects"] .od-art2d-sticky-title > .od-work-title-projects-es,
html:not([lang="es"]) body #views #work[data-cat][data-cat="projects"] .od-art2d-sticky-title > .od-work-title-projects-en{
  display:block!important;
}
html body #views #work[data-cat] .od-art2d-sticky-title > span{
  width:max-content!important;
  height:auto!important;
  max-width:100%!important;
  white-space:nowrap!important;
  transform:none!important;
  rotate:none!important;
  scale:1!important;
  text-transform:none!important;
  text-shadow:none!important;
  line-height:1!important;
  transform-origin:left center!important;
}
html body #views #work[data-cat][data-cat="art2d"] .od-art2d-sticky-title > :is(.od-art-title-es,.od-art-title-en){
  font-family:'UnifrakturCook','Grenze Gotisch',serif!important;
  font-weight:700!important;
  font-size:clamp(36px,4.5vw,68px)!important;
  color:#d1ff00!important;
  -webkit-text-fill-color:#d1ff00!important;
}
html body #views #work[data-cat] .od-art2d-sticky-title > :is(.od-work-title-2d-es,.od-work-title-2d-en){
  /* Same face as the .type-lettering-saucer in the home card, not the
     unrelated heading fonts from old work-section themes. */
  font-family:'SaucerBB','Bricolage Grotesque',sans-serif!important;
  font-weight:400!important;
  font-style:normal!important;
  font-size:clamp(33px,3.8vw,61px)!important;
  letter-spacing:.005em!important;
  color:#d1ff00!important;
  -webkit-text-fill-color:#d1ff00!important;
}
html body #views #work[data-cat] .od-art2d-sticky-title > :is(.od-work-title-3d-es,.od-work-title-3d-en){
  width:min(100%,400px)!important;
  height:auto!important;
  max-width:100%!important;
  /* The 3D artwork has more empty space on its left than the other titles.
     Correct only its visual inset, keeping the shared header grid fixed. */
  margin-left:clamp(-22px,-1.45vw,-10px)!important;
}
html body #views #work[data-cat] .od-art2d-sticky-title > :is(.od-work-title-3d-es,.od-work-title-3d-en) img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:none!important;
  filter:none!important;
}
html body #views #work[data-cat] .od-art2d-sticky-title > .od-work-title-story{
  font-family:'Mea Culpa',cursive!important;
  font-size:clamp(30px,3.5vw,57px)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
html body #views #work[data-cat] .od-art2d-sticky-title > :is(.od-work-title-projects-es,.od-work-title-projects-en){
  font-family:'Bangers','Black Ops One',sans-serif!important;
  font-size:clamp(34px,3.8vw,62px)!important;
  color:#d1ff00!important;
  -webkit-text-fill-color:#d1ff00!important;
}
/* Old large headings stay in the DOM for routing/i18n but are not visually
   duplicated above the shared horizontal strip. */
html body #views #work[data-cat] > .work-section > .section-heading{display:none!important}
html body #views #work[data-cat] .od-reel-heading-kicker,
html body #views #work[data-cat] .od-reel-wordmark-3d{display:none!important}

/* The Art 2D filter strip remains the reference for position and behavior. */
html body #views #work[data-cat] .od-work-common-bar{display:none!important}
html body #views #work[data-cat]:not([data-cat="art2d"]) .od-work-common-bar{
  display:flex!important;
  position:sticky!important;
  z-index:92!important;
  top:clamp(72px,5.2vw,88px)!important;
  width:100%!important;
  min-width:0!important;
  min-height:34px!important;
  height:auto!important;
  box-sizing:border-box!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  flex-wrap:nowrap!important;
  margin:0 0 clamp(14px,2vw,23px)!important;
  padding:0!important;
  gap:0!important;
  background:#09090c!important;
  border:0!important;
  box-shadow:none!important;
  animation:none!important;
}
html body #views #work[data-cat] .od-work-common-bar .od-work-bar-tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  flex:0 0 auto!important;
  border:0!important;
  padding:8px clamp(11px,1.4vw,23px)!important;
  margin:0!important;
  background:#101014!important;
  color:#f4f4f5!important;
  -webkit-text-fill-color:#f4f4f5!important;
  font:600 11px/1.3 var(--od-site-copy,'Manrope','Space Grotesk',Arial,sans-serif)!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  outline-offset:-2px!important;
  transition:none!important;
}
html body #views #work[data-cat] .od-work-common-bar .od-work-bar-tab.active,
html body #views #work[data-cat] .od-work-common-bar .od-work-bar-tab[aria-pressed="true"]{
  background:#d1ff00!important;
  color:#09090c!important;
  -webkit-text-fill-color:#09090c!important;
}
html body #views #work[data-cat] .od-work-common-bar .od-work-bar-tab:hover:not(.active){
  background:#23232b!important;
}
html body #views #work[data-cat] .od-work-common-bar .od-work-bar-tab:focus-visible{outline:2px solid #d1ff00!important}

/* Both reels now start under the same fixed-height title and bar. The
   asymmetry lives only in the artwork grid, not in the navigation chrome. */
html body #views #work[data-cat]:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reels{
  margin-top:clamp(20px,2.8vw,42px)!important;
}
html body #views #work[data-cat]:is([data-cat="animation2d"],[data-cat="animation3d"]) .work-topline{
  transition:none!important;
}
html body #views #work[data-cat]:is([data-cat="storyboard"],[data-cat="projects"]) .project-grid{
  display:grid!important;
  width:100%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:auto!important;
  gap:clamp(12px,1.7vw,25px)!important;
  align-items:start!important;
}
html body #views #work[data-cat]:is([data-cat="storyboard"],[data-cat="projects"]) .project-grid > .project-card:not(.hidden){
  display:block!important;
  grid-area:auto!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/10!important;
  transform:none!important;
  rotate:none!important;
}
html body #views #work[data-cat]:is([data-cat="storyboard"],[data-cat="projects"]) .project-grid > .project-card .project-open{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
html body #views #work[data-cat]:is([data-cat="storyboard"],[data-cat="projects"]) .od-work-common-bar{margin-bottom:clamp(20px,2.8vw,42px)!important}

/* Switching from Art 2D mid-scroll should not animate the old header's
   collapsed state into another category. Art 2D scroll shrinking is kept. */
html body #views #work[data-cat]:not([data-cat="art2d"]) .work-topline,
html body #views #work[data-cat]:not([data-cat="art2d"]) .work-topline *{transition:none!important;animation:none!important}
@media(max-width:760px){
  html body #views #work[data-cat] > .work-section{
    padding:clamp(190px,24vh,242px) 4vw 85px 4vw!important;
  }
  html body #views #work[data-cat] .work-topline{
    height:67px!important;
    top:calc(18px + env(safe-area-inset-top,0px))!important;
    column-gap:clamp(7px,1.6vw,14px)!important;
  }
  html body #views #work[data-cat] .od-art2d-sticky-title > :is(.od-work-title-2d-es,.od-work-title-2d-en){
    font-size:clamp(25px,6.5vw,44px)!important;
  }
  html body #views #work[data-cat] .od-art2d-sticky-title > :is(.od-work-title-3d-es,.od-work-title-3d-en){width:min(100%,240px)!important}
  html body #views #work[data-cat] .od-art2d-sticky-title > .od-work-title-story{font-size:clamp(24px,6vw,37px)!important}
  html body #views #work[data-cat] .od-art2d-sticky-title > :is(.od-work-title-projects-es,.od-work-title-projects-en){font-size:clamp(27px,6.3vw,40px)!important}
  html body #views #work[data-cat]:not([data-cat="art2d"]) .od-work-common-bar{
    top:calc(186px + env(safe-area-inset-top,0px))!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  html body #views #work[data-cat]:not([data-cat="art2d"]) .od-work-common-bar::-webkit-scrollbar{display:none!important}
  html body #views #work[data-cat] .od-work-common-bar .od-work-bar-tab{
    min-height:43px!important;
    font-size:9px!important;
    padding:8px 12px!important;
  }
  html body #views #work[data-cat]:is([data-cat="storyboard"],[data-cat="projects"]) .project-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
}
@media(max-width:760px) and (max-height:520px){
  html body #views #work[data-cat]:not([data-cat="art2d"]) .od-work-common-bar{
    top:calc(149px + env(safe-area-inset-top,0px))!important;
  }
}

/* v234.1 — Preserve Art 2D's scroll-only title contraction. Keeping
   important transform here avoids the global title reset cancelling it.
   Category-to-category navigation itself remains instant. */
html body #views #work[data-cat="art2d"] .work-topline.od-art2d-condensed .od-art2d-sticky-title > :is(.od-art-title-es,.od-art-title-en){
  transform:scale(.56)!important;
}
@media(max-width:760px){
  html body #views #work[data-cat="art2d"] .work-topline.od-art2d-condensed .od-art2d-sticky-title > :is(.od-art-title-es,.od-art-title-en){
    transform:scale(.64)!important;
  }
}

/* v235 — Same element and coordinates for the Art 2D filters and
   all other work-section tabs. */
html body #views #work[data-cat] > .work-section > .od-work-common-bar{
 display:flex!important;position:sticky!important;
 top:clamp(72px,5.2vw,88px)!important;z-index:94!important;
 width:95%!important;max-width:none!important;min-width:0!important;
 min-height:34px!important;height:auto!important;
 margin:0 auto clamp(14px,2vw,23px)!important;
 padding:0!important;gap:0!important;
 align-items:stretch!important;justify-content:flex-start!important;
 flex-wrap:nowrap!important;box-sizing:border-box!important;
 background:#09090c!important;border:0!important;box-shadow:none!important;
 animation:none!important;transition:none!important;
}
html body #views #work[data-cat="art2d"] .od-work-common-bar > .od-work-bar-tab{display:none!important}
html body #views #work[data-cat]:not([data-cat="art2d"]) .od-work-common-bar > .od-art2d-filters{display:none!important}
html body #views #work[data-cat="art2d"] .od-work-common-bar > .od-art2d-filters{
 display:flex!important;position:static!important;inset:auto!important;
 top:auto!important;left:auto!important;right:auto!important;
 width:100%!important;max-width:none!important;min-width:0!important;
 min-height:34px!important;height:auto!important;
 align-items:stretch!important;justify-content:flex-start!important;
 flex-wrap:nowrap!important;gap:3px!important;
 margin:0!important;padding:0!important;
 background:#09090c!important;border:0!important;box-shadow:none!important;
 overflow:visible!important;transform:none!important;
 animation:none!important;transition:none!important;
}
html body #views #work[data-cat="art2d"] .od-work-common-bar .od-art2d-filter{
 flex:0 0 auto!important;min-height:34px!important;
 padding:8px clamp(11px,1.4vw,23px)!important;
}
html body #views #work[data-cat]:not([data-cat="art2d"]) .od-work-common-bar > .od-work-bar-tab{
 display:inline-flex!important;min-height:34px!important;
}
/* Match the actual card: Subway NewYork / Sedgwick Ave Display, not SaucerBB. */
html body #views #work[data-cat="animation2d"] .od-art2d-sticky-title > :is(.od-work-title-2d-es,.od-work-title-2d-en){
 display:none!important;position:relative!important;
 font-family:"Subway NewYork Std","Subway New York Std","Sedgwick Ave Display",cursive!important;
 font-weight:400!important;font-style:normal!important;
 font-size:clamp(36px,3.5vw,56px)!important;
 line-height:1!important;letter-spacing:-.045em!important;
 text-transform:none!important;
 color:#e7f3f4!important;-webkit-text-fill-color:#e7f3f4!important;
 -webkit-text-stroke:0!important;
 text-shadow:1px 1px 0 rgba(7,14,21,.72)!important;
 transform:rotate(-3deg) skewX(-4deg)!important;
 transform-origin:left center!important;
 width:max-content!important;max-width:100%!important;
 padding:0!important;white-space:nowrap!important;
}
html[lang="es"] body #views #work[data-cat="animation2d"] .od-art2d-sticky-title > .od-work-title-2d-es,
html:not([lang="es"]) body #views #work[data-cat="animation2d"] .od-art2d-sticky-title > .od-work-title-2d-en{display:block!important}
/* Remove the old "01 REEL / 1 PROJECT / ..." category summaries. */
html body #views #work[data-cat] .work-topline > #workCounter{
 display:none!important;visibility:hidden!important;
}
@media(max-width:760px){
 html body #views #work[data-cat] > .work-section > .od-work-common-bar{
  width:100%!important;
  top:calc(186px + env(safe-area-inset-top,0px))!important;
  overflow-x:auto!important;overflow-y:hidden!important;
  scrollbar-width:none!important;-webkit-overflow-scrolling:touch;
 }
 html body #views #work[data-cat] > .work-section > .od-work-common-bar::-webkit-scrollbar{display:none!important}
 html body #views #work[data-cat="art2d"] .od-work-common-bar > .od-art2d-filters{
  flex-wrap:nowrap!important;width:max-content!important;min-width:100%!important;
 }
 html body #views #work[data-cat="art2d"] .od-work-common-bar .od-art2d-filter{
  flex:0 0 auto!important;min-width:max-content!important;padding:8px 10px!important;font-size:9px!important;
 }
 html body #views #work[data-cat="animation2d"] .od-art2d-sticky-title > :is(.od-work-title-2d-es,.od-work-title-2d-en){
  font-size:clamp(26px,6.6vw,40px)!important;
 }
}
@media(max-width:760px) and (max-height:520px){
 html body #views #work[data-cat] > .work-section > .od-work-common-bar{
  top:calc(149px + env(safe-area-inset-top,0px))!important;
 }
}

/* v237 — Both Vimeo reels share one centered footprint within the work
   content grid; category changes cannot shift the video left or right. */
html body #views #work[data-cat]:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reels{
  position:relative!important;
  width:94%!important;
  max-width:1340px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-inline:auto!important;
  justify-self:center!important;
  left:auto!important;
  right:auto!important;
  translate:none!important;
  transform:none!important;
}
@media(max-width:760px){
  html body #views #work[data-cat]:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reels{
    width:100%!important;
  }
}

/* v255 — Exact viewport centering for the 2D and 3D reel container.
   The work section uses asymmetric padding, so auto margins alone are not
   enough. The alignment script calculates the offset from actual layout
   measurements, with no assumptions about the padding or viewport size. */
html body #views #work[data-cat]:is([data-cat="animation2d"],[data-cat="animation3d"]) .od-animation-reels {
  margin-left:auto!important;
  margin-right:auto!important;
  margin-inline:auto!important;
  left:var(--od-reel-center-offset,0px)!important;
  right:auto!important;
  translate:none!important;
  transform:none!important;
}