/* v360 — Consistent editorial copy in all three Projects and Sky Oceans.
   Preserve hierarchy through typography, not changing ink colors. */
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"],[data-project-view="personal"])
  :is(.od-project-details,.od-project-overview,.od-project-awards),
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"],[data-project-view="personal"])
  :is(.od-project-details,.od-project-overview,.od-project-awards) *,
html body #views #work[data-cat="storyboard"][data-storyboard-mode="animatics"]
  .od-storyboard-intro,
html body #views #work[data-cat="storyboard"][data-storyboard-mode="animatics"]
  .od-storyboard-intro *{
  color:#f1f2f4!important;
  -webkit-text-fill-color:#f1f2f4!important;
}
/* The first line is a reserved title lane, regardless of locale.
   JS fits each translated title to the actual width; never wrap the title
   or increase its grid row when moving between EN and ES. */
html body #views #work[data-cat="projects"] .od-project-overview > h3{
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
/* Awards labels also remain in their own lane; they must not push
   festival names/year into a new row when switching languages. */
html body #views #work[data-cat="projects"] .od-project-award-kind{
  white-space:nowrap!important;
  display:block!important;
}

/* Both films now present format/year once, then the distinct title,
   the academic context, and finally the plot summary. */
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
  .od-project-feature > .od-project-overview > h3{
  margin-bottom:clamp(6px,.85vh,10px)!important;
}
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
  .od-project-feature > .od-project-overview > .od-project-note{
  margin:0 0 clamp(12px,1.5vh,18px)!important;
}
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
  .od-project-feature > .od-project-overview > .od-project-synopsis{
  margin-bottom:0!important;
}

/* v361 — Original vector titles, inside the editorial reading panel.
   The full width is used by both logos without stretching their artwork.
   These language-independent assets are excluded from i18n text replacement,
   while the surrounding bilingual text keeps the measured EN/ES slots. */
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
  .od-project-feature > .od-project-overview > h3.od-project-logo-title{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  margin:0 0 clamp(10px,1.35vh,17px)!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
  white-space:normal!important;
  overflow:visible!important;
}
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
  .od-project-feature > .od-project-overview > h3.od-project-logo-title > svg{
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:left center!important;
  border:0!important;
}
/* Small screens retain the same full-width, aspect-ratio-correct mark;
   text/credits are allowed to flow normally, never cropped to a fixed height. */

/* v408 — Unfiltered native SVG wordmarks. The larger responsive display
   below improves legibility without raster blur or edge sharpening. */
html body #views #work[data-cat="projects"]
  .od-project-view[data-project-view="groove"]
  .od-project-feature > .od-project-overview > h3.od-project-logo-title::before{
  content:none!important;
  background:none!important;
  filter:none!important;
}
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
  .od-project-feature > .od-project-overview > h3.od-project-logo-title > svg{
  filter:none!important;
  image-rendering:auto!important;
  shape-rendering:auto!important;
}
html body #views #work[data-cat="projects"]
  .od-project-feature > .od-project-overview > h3.od-project-logo-title
  > svg.od-groove-mark path:not([fill]){
  stroke:#fff;
  stroke-width:4px;
  stroke-linejoin:round;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  paint-order:stroke fill;
}

/* On desktop, reserve vertical space for the information rather than
   allowing each SVG to take half the reading panel. Preserve its intrinsic
   proportions (contain), the full available logo lane, and all copy. */
@media(min-width:1051px){
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > h3.od-project-logo-title > svg{
    height:clamp(88px,14vh,140px)!important;
    max-height:clamp(88px,14vh,140px)!important;
    width:100%!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-details{
    grid-template-rows:auto auto auto!important;
    align-content:start!important;
    gap:clamp(8px,1.25vh,13px)!important;
    padding:clamp(12px,1.45vw,20px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    :is(.od-project-feature,.od-project-feature > .od-project-overview){
    min-height:0!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > h3.od-project-logo-title{
    margin-bottom:clamp(5px,.75vh,9px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > .od-project-eyebrow{
    margin-bottom:clamp(4px,.6vh,7px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > .od-project-note{
    margin:0 0 clamp(6px,.9vh,10px)!important;
    font-size:clamp(10.5px,1.25vh,12px)!important;
    line-height:1.35!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-feature > .od-project-overview > .od-project-synopsis{
    font-size:clamp(12px,1.4vh,14px)!important;
    line-height:1.47!important;
    margin-bottom:0!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-credits-intro{
    min-height:0!important;
    margin-bottom:clamp(6px,.9vh,10px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-credits-intro > .od-project-eyebrow{
    margin-bottom:clamp(3px,.5vh,6px)!important;
    font-size:10px!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-credits-intro h4{
    font-size:clamp(16px,1.6vh,19px)!important;
    line-height:1.18!important;
    margin-bottom:4px!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-credits-intro p{
    font-size:clamp(11.5px,1.25vh,13px)!important;
    line-height:1.42!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-stages{
    gap:clamp(8px,1.1vw,16px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-stage h5{
    font-size:clamp(9px,1.05vh,10.5px)!important;
    margin-bottom:3px!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-stage p{
    font-size:clamp(10.5px,1.2vh,12px)!important;
    line-height:1.42!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-awards{
    padding-top:0!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-awards h4{
    margin-bottom:5px!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-awards li{
    padding:5px 0!important;
    column-gap:8px!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"])
    .od-project-award-festival{
    font-size:clamp(10px,1.15vh,11.5px)!important;
    line-height:1.3!important;
  }
}
/* Tablet and phone layouts keep natural vertical flow rather than shrinking
   the descriptions to unreadable text or hiding part of the project. */