/* Unified work-section presentation | Projects + Storyboard
   Existing navigation, content and responsive header remain shared.
   Only the relevant three Projects subcategories are shown. */

/* The original category selectors must remain in the DOM for other work
   sections, but never appear in Projects' submenu. This specificity exceeds
   the shared-header rule which normally forces them to display. */
html body #views #work[data-cat="projects"]:not([data-cat="art2d"])
  > .work-section > .od-work-common-bar > button.od-work-bar-tab {
  display:none!important;
  visibility:hidden!important;
}
html body #views #work[data-cat="projects"]
  > .work-section > .od-work-common-bar > .od-projects-modes {
  display:flex!important;
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:3px!important;
  background:none!important;
  margin:0!important;
  padding:0!important;
}
html body #views #work[data-cat="projects"] .od-projects-mode {
  min-height:34px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#101014!important;
  color:#f4f4f5!important;
  -webkit-text-fill-color:#f4f4f5!important;
  font:600 11px/1.3 var(--od-site-copy,'Manrope',sans-serif)!important;
  letter-spacing:.045em!important;
  padding:8px clamp(11px,1.4vw,23px)!important;
  transition:none!important;
}
html body #views #work[data-cat="projects"] .od-projects-mode:is(.is-active,[aria-pressed="true"]){
  background:#d1ff00!important;
  color:#09090c!important;
  -webkit-text-fill-color:#09090c!important;
}

/* Projects backgrounds: full-viewport enlarged copies of the same artworks
   used inside each project. The blur is applied only to the backdrop. */
html body #views > .od-projects-backdrop {
  display:none!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
  isolation:isolate!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:#090a0f!important;
}
html body #views:has(> #work.active[data-cat="projects"]) > .od-projects-backdrop {
  display:block!important;
}
html body #views > .od-projects-backdrop > .od-projects-bg {
  display:none!important;
  position:absolute!important;
  inset:-8%!important;
  width:116%!important;
  height:116%!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center center!important;
  transform:scale(1.06)!important;
  filter:blur(38px) brightness(.95) saturate(.85)!important;
  pointer-events:none!important;
}
html body #views > .od-projects-backdrop > .od-projects-bg-groove {
  background-image:url("assets/previews/Groove%20Way%20Laureles.png")!important;
}
html body #views > .od-projects-backdrop > .od-projects-bg-devotus {
  background-image:url("assets/previews/Devotus%20Anima%20Laureles.png")!important;
}
html body #views > .od-projects-backdrop > .od-projects-bg-personal {
  background-image:url("assets/previews/experimento.png")!important;
}
html body #views:has(> #work.active[data-cat="projects"][data-projects-mode="groove"])
  > .od-projects-backdrop > .od-projects-bg-groove,
html body #views:has(> #work.active[data-cat="projects"][data-projects-mode="devotus"])
  > .od-projects-backdrop > .od-projects-bg-devotus,
html body #views:has(> #work.active[data-cat="projects"][data-projects-mode="personal"])
  > .od-projects-backdrop > .od-projects-bg-personal {
  display:block!important;
}
html body #views > .od-projects-backdrop::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:rgba(4,7,12,.43)!important;
}

/* Storyboard shares the same image, sizing and white bottom fade as 2D Animation.
   Add only a barely visible tint; do not darken the entire composition. */
html body #views:has(> #work.active[data-cat="storyboard"]) > .od-animation-backdrop {
  display:block!important;
  visibility:visible!important;
}
html body #views:has(> #work.active[data-cat="storyboard"])
  > .od-animation-backdrop > .od-animation-bg-2d {
  display:block!important;
  background-image:url("assets/animation2d/background/BG%20Animation.png?v=252")!important;
}
html body #views:has(> #work.active[data-cat="storyboard"])
  > .od-animation-backdrop > .od-animation-bottom-fade {
  display:block!important;
}
html body #views:has(> #work.active[data-cat="storyboard"]) > .od-animation-backdrop::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:rgba(5,8,14,.055)!important;
}

/* Both sections show their chosen image through a transparent work panel.
   Remove the legacy ornament overlays, pseudo-shapes and animated orbit. */
html body #views #work:is([data-cat="projects"],[data-cat="storyboard"]).view-panel {
  z-index:2!important;
  isolation:auto!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
html body #views #work:is([data-cat="projects"],[data-cat="storyboard"]) > .work-section {
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  isolation:auto!important;
}
html body #views #work:is([data-cat="projects"],[data-cat="storyboard"]) > .work-section::before,
html body #views #work:is([data-cat="projects"],[data-cat="storyboard"]) > .work-section::after {
  content:none!important;
  display:none!important;
  animation:none!important;
}
html body #views #work:is([data-cat="projects"],[data-cat="storyboard"]) .section-decor.work-decor,
html body #views #work:is([data-cat="projects"],[data-cat="storyboard"]) .od-animation-ambient {
  display:none!important;
}
/* The top nav remains identical in position and geometry to other sections. */
html body #views #work[data-cat="projects"] > .work-section > .od-work-common-bar,
html body #views #work[data-cat="storyboard"] > .work-section > .od-work-common-bar {
  background:#09090c!important;
  box-shadow:none!important;
}

/* Project-specific editorial layout: no ornamental image frame, oversized
   boxes, faux paper decorations or stacked accent borders. */
html body #views #work[data-cat="projects"] .od-projects-showcase {
  width:94%!important;
  max-width:1340px!important;
  margin:clamp(12px,1.5vw,22px) auto 90px!important;
  padding:0!important;
  color:#f1f2f4!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-feature {
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)!important;
  align-items:center!important;
  gap:clamp(24px,3vw,46px)!important;
  margin-bottom:clamp(34px,4.3vw,60px)!important;
}
html body #views #work[data-cat="projects"] .od-project-visual {
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  clip-path:none!important;
  padding:0!important;
  margin:0!important;
}
html body #views #work[data-cat="projects"] .od-project-visual img {
  filter:none!important;
  opacity:1!important;
  border-radius:0!important;
  clip-path:none!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-eyebrow {
  color:#afb3bc!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
  margin-bottom:12px!important;
}
html body #views #work[data-cat="projects"] .od-project-overview h3 {
  font:700 clamp(28px,2.8vw,44px)/1.18 var(--od-site-copy,'Manrope',sans-serif)!important;
  margin-bottom:20px!important;
  text-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-synopsis {
  color:#e0e1e4!important;
  line-height:1.75!important;
  max-width:64ch!important;
}
html body #views #work[data-cat="projects"] .od-project-note {
  color:#b7bbc4!important;
  margin-top:20px!important;
}
html body #views #work[data-cat="projects"] .od-project-player-section {
  margin-bottom:clamp(36px,4.5vw,70px)!important;
}
html body #views #work[data-cat="projects"] .od-project-block-heading {
  color:#e7e7e9!important;
  background:none!important;
  padding:0!important;
}
html body #views #work[data-cat="projects"] .od-project-block-heading a {
  color:#d1ff00!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-player {
  background:#09090c!important;
  border:0!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-credits {
  display:block!important;
  padding-top:clamp(26px,3vw,40px)!important;
  border-top:1px solid rgba(255,255,255,.2)!important;
}
html body #views #work[data-cat="projects"] .od-project-credits-intro {
  max-width:800px!important;
  margin:0 0 clamp(24px,3vw,40px)!important;
}
html body #views #work[data-cat="projects"] .od-project-credits-intro h4 {
  font:700 clamp(21px,2vw,29px)/1.24 var(--od-site-copy,'Manrope',sans-serif)!important;
}
html body #views #work[data-cat="projects"] .od-project-stages {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:start!important;
  gap:clamp(20px,2.5vw,38px)!important;
}
html body #views #work[data-cat="projects"] .od-project-stage {
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-stage h5 {
  color:#d1ff00!important;
  margin-bottom:12px!important;
  font-size:10px!important;
}
html body #views #work[data-cat="projects"] .od-project-stage p {
  color:#e1e2e5!important;
  line-height:1.75!important;
}

/* Film information, descriptions and metadata use one consistent family.
   Hierarchy comes from size and weight, not mixed serif/monospace fonts. */
html body #views #work[data-cat="projects"] .od-project-eyebrow,
html body #views #work[data-cat="projects"] .od-project-overview h3,
html body #views #work[data-cat="projects"] .od-project-synopsis,
html body #views #work[data-cat="projects"] .od-project-note,
html body #views #work[data-cat="projects"] .od-project-block-heading {
  font-family:var(--od-site-copy,'Manrope',sans-serif)!important;
}
html body #views #work[data-cat="projects"] .od-project-eyebrow {
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.4!important;
  letter-spacing:.07em!important;
}
html body #views #work[data-cat="projects"] .od-project-note {
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.65!important;
  letter-spacing:0!important;
}
html body #views #work[data-cat="projects"] .od-project-block-heading {
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.5!important;
}

/* Reserved credit treatment for Groove Way and Devotus Anima:
   preserve the label > role > description > phases hierarchy, but
   scale it down to avoid competing with the film description and imagery. */
html body #views #work[data-cat="projects"] .od-project-credits {
  padding-top:clamp(20px,2.2vw,30px)!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
}
html body #views #work[data-cat="projects"] .od-project-credits-intro {
  margin-bottom:clamp(18px,2.2vw,27px)!important;
}
html body #views #work[data-cat="projects"] .od-project-credits-intro > .od-project-eyebrow {
  font-size:9px!important;
  font-weight:600!important;
  letter-spacing:.08em!important;
  margin-bottom:9px!important;
  color:#b9bdc5!important;
}
html body #views #work[data-cat="projects"] .od-project-credits-intro h4 {
  font-family:var(--od-site-copy,'Manrope',sans-serif)!important;
  font-size:clamp(18px,1.48vw,23px)!important;
  font-weight:650!important;
  line-height:1.3!important;
  letter-spacing:-.015em!important;
  margin-bottom:10px!important;
  color:#e4e6e9!important;
}
html body #views #work[data-cat="projects"] .od-project-credits-intro p {
  font-family:var(--od-site-copy,'Manrope',sans-serif)!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.7!important;
  color:#c3c6cc!important;
  max-width:70ch!important;
}
html body #views #work[data-cat="projects"] .od-project-stages {
  gap:clamp(16px,2vw,30px)!important;
}
html body #views #work[data-cat="projects"] .od-project-stage h5 {
  font-family:var(--od-site-copy,'Manrope',sans-serif)!important;
  font-size:10px!important;
  font-weight:650!important;
  line-height:1.45!important;
  letter-spacing:.045em!important;
  margin-bottom:7px!important;
  color:#c8d9a7!important;
}
html body #views #work[data-cat="projects"] .od-project-stage p {
  font-family:var(--od-site-copy,'Manrope',sans-serif)!important;
  font-size:12.5px!important;
  font-weight:400!important;
  line-height:1.7!important;
  color:#c9cbd0!important;
}

@media(max-width:950px){
  html body #views #work[data-cat="projects"] .od-project-feature {
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(16px,3vw,30px)!important;
  }
}
@media(max-width:760px){
  html body #views #work[data-cat="projects"] .od-projects-showcase {
    width:100%!important;
    margin:14px auto 70px!important;
    left:0!important;
  }
  html body #views #work[data-cat="projects"] .od-project-stages {
    grid-template-columns:minmax(0,1fr)!important;
    gap:24px!important;
  }
  html body #views #work[data-cat="projects"] .od-projects-mode {
    font-size:10px!important;
    letter-spacing:.01em!important;
    padding:8px 11px!important;
  }
  html body #views > .od-projects-backdrop > .od-projects-bg {
    filter:blur(28px) brightness(.95) saturate(.85)!important;
  }
}
@media(prefers-reduced-motion:reduce) {
  html body #views #work[data-cat="projects"] .od-projects-mode {
    transition:none!important;
  }
}

/* v320 — Projects first-screen layout.
   Keep the entire textual presentation together on desktop, and in narrow
   viewports place text ahead of the artwork. Film playback follows the credits. */
html body #views #work[data-cat="projects"][data-projects-mode="groove"] .od-projects-showcase > .od-project-view[data-project-view="groove"],
html body #views #work[data-cat="projects"][data-projects-mode="devotus"] .od-projects-showcase > .od-project-view[data-project-view="devotus"],
html body #views #work[data-cat="projects"][data-projects-mode="personal"] .od-projects-showcase > .od-project-view[data-project-view="personal"] {
  display:grid!important;
}
html body #views #work[data-cat="projects"] .od-projects-showcase > .od-project-view {
  grid-template-columns:minmax(0,.35fr) minmax(0,.65fr)!important;
  grid-template-areas:
    "art info"
    "credits credits"
    "film film"!important;
  column-gap:clamp(19px,2.8vw,43px)!important;
  row-gap:clamp(12px,1.5vw,20px)!important;
  align-items:center!important;
}
html body #views #work[data-cat="projects"] .od-projects-showcase > .od-project-view[data-project-view="personal"]{
  grid-template-columns:minmax(0,.4fr) minmax(0,.6fr)!important;
  grid-template-areas:"art info"!important;
}
html body #views #work[data-cat="projects"] .od-project-view > .od-project-feature{
  display:contents!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-visual{
  grid-area:art!important;
  align-self:center!important;
  justify-self:stretch!important;
  width:100%!important;
  max-width:100%!important;
  max-height:min(27vh,240px)!important;
  margin:0!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-visual img{
  width:100%!important;
  height:auto!important;
  max-height:min(27vh,240px)!important;
  object-fit:contain!important;
  object-position:center!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-overview{
  grid-area:info!important;
  align-self:center!important;
  width:100%!important;
  min-width:0!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-overview h3{
  font-size:clamp(25px,2.55vw,37px)!important;
  line-height:1.18!important;
  margin:0 0 12px!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-eyebrow{
  margin-bottom:8px!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-synopsis{
  font-size:clamp(13px,1vw,15px)!important;
  line-height:1.62!important;
  margin:0 0 10px!important;
  max-width:75ch!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-note{
  margin-top:12px!important;
}
html body #views #work[data-cat="projects"] .od-project-view > .od-project-credits{
  grid-area:credits!important;
  margin:0!important;
  padding:clamp(12px,1.7vh,20px) 0 0!important;
  align-self:start!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-credits-intro{
  max-width:none!important;
  margin-bottom:clamp(10px,1.35vh,16px)!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-credits-intro h4{
  font-size:clamp(17px,1.35vw,21px)!important;
  margin-bottom:6px!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-credits-intro p{
  font-size:12.5px!important;
  line-height:1.58!important;
  max-width:95ch!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-stages{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(14px,2.1vw,28px)!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-stage h5{
  margin-bottom:5px!important;
}
html body #views #work[data-cat="projects"] .od-project-view .od-project-stage p{
  font-size:12px!important;
  line-height:1.6!important;
}
html body #views #work[data-cat="projects"] .od-project-view > .od-project-player-section{
  grid-area:film!important;
  margin:clamp(24px,3.5vw,48px) 0 0!important;
}
html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-visual,
html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-visual img{
  max-height:min(52vh,430px)!important;
}
@media(min-width:761px) and (max-height:700px){
  html body #views #work[data-cat="projects"] .od-project-view .od-project-visual,
  html body #views #work[data-cat="projects"] .od-project-view .od-project-visual img{
    max-height:min(25vh,178px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view > .od-project-credits{
    padding-top:10px!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view .od-project-credits-intro{
    margin-bottom:9px!important;
  }
}
@media(max-width:760px){
  /* Mobile is text-first: descriptions and film credits precede large artwork. */
  html body #views #work[data-cat="projects"] .od-projects-showcase > .od-project-view{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"info" "credits" "art" "film"!important;
    row-gap:clamp(15px,3vw,24px)!important;
  }
  html body #views #work[data-cat="projects"] .od-projects-showcase > .od-project-view[data-project-view="personal"]{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"info" "art"!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view .od-project-overview{
    align-self:start!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view .od-project-overview h3{
    font-size:clamp(25px,6vw,34px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view .od-project-synopsis{
    font-size:14px!important;
    line-height:1.7!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view .od-project-stages{
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view .od-project-visual,
  html body #views #work[data-cat="projects"] .od-project-view .od-project-visual img{
    max-height:clamp(160px,30vh,260px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view > .od-project-player-section{
    margin-top:12px!important;
  }
}
/* v322 — Groove Way / Devotus Anima: video beside project editorial column.
   Left: film. Right: illustration, synopsis and participation credits.
   Other Projects views preserve their own layouts. */
html body #views #work[data-cat="projects"][data-projects-mode="groove"]
  .od-projects-showcase > .od-project-view[data-project-view="groove"],
html body #views #work[data-cat="projects"][data-projects-mode="devotus"]
  .od-projects-showcase > .od-project-view[data-project-view="devotus"]{
  display:block!important;
  grid-template:none!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(22px,2.6vw,44px)!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:stretch!important;
  min-width:0!important;
  width:100%!important;
  gap:clamp(12px,1.6vh,18px)!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-feature{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(108px,26%,166px)!important;
  grid-template-areas:"summary artwork"!important;
  align-items:start!important;
  gap:clamp(12px,1.5vw,20px)!important;
  margin:0!important;
  padding:0!important;
  width:100%!important;
  min-width: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{
  grid-area:summary!important;
  min-width:0!important;
  align-self:start!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-visual{
  grid-area:artwork!important;
  display:block!important;
  justify-self:end!important;
  align-self:start!important;
  width:100%!important;
  max-height:132px!important;
  margin:0!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-visual img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:132px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:top right!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-overview h3{
  font-size:clamp(22px,2.1vw,33px)!important;
  margin-bottom:10px!important;
  line-height:1.16!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-synopsis{
  font-size:13px!important;
  line-height:1.57!important;
  margin-bottom:9px!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-note{
  font-size:11.5px!important;
  line-height:1.45!important;
  margin-top:7px!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-eyebrow{
  margin-bottom:7px!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-credits{
  display:block!important;
  width:100%!important;
  grid-area:auto!important;
  margin:0!important;
  padding:clamp(10px,1.6vh,17px) 0 0!important;
  align-self:start!important;
  border-top:1px solid rgba(255,255,255,.14)!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-credits-intro{
  margin-bottom:clamp(11px,1.7vh,18px)!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(17px,1.4vw,21px)!important;
  margin-bottom:6px!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:12px!important;
  line-height:1.55!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-stages{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(10px,1.4vw,19px)!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:9.5px!important;
  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-stage p{
  font-size:11.5px!important;
  line-height:1.55!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split > .od-project-player-section{
  grid-area:auto!important;
  align-self:center!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-player{
  width:100%!important;
  aspect-ratio:16/9!important;
}
@media(max-width:1050px){
  /* Reading remains the priority on tablet-sized viewports. */
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split{
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(24px,4vw,36px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details{
    order:0!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split > .od-project-player-section{
    order:1!important;
  }
}
@media(max-width:760px){
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-feature{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"summary" "artwork"!important;
    gap:15px!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-visual{
    justify-self:start!important;
    width:min(100%,280px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-stages{
    grid-template-columns:minmax(0,1fr)!important;
    gap:15px!important;
  }
}

/* v323 — Viewport-filling project split.
   Use the available desktop canvas, not the old compact text treatment.
   Keep film on the left and all description, artwork and credits on the right.
   Small screens retain natural scrolling instead of clipping content. */
@media(min-width:1051px){
  html body #views #work[data-cat="projects"] > .work-section{
    padding-top:clamp(60px,7.2vh,86px)!important;
    padding-bottom:clamp(10px,1.5vh,20px)!important;
  }
  html body #views #work[data-cat="projects"] .work-topline{
    margin-bottom:clamp(8px,1.2vh,15px)!important;
  }
  html body #views #work[data-cat="projects"] > .work-section > .od-work-common-bar{
    margin-bottom:clamp(11px,1.7vh,19px)!important;
  }
  html body #views #work[data-cat="projects"] .od-projects-showcase{
    width:100%!important;
    max-width:1500px!important;
    margin:clamp(8px,1.25vh,15px) auto 0!important;
    padding:0!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split{
    min-height:clamp(0px,calc(100dvh - 250px),850px)!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:clamp(25px,3vw,52px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split > .od-project-player-section{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-self:stretch!important;
    width:100%!important;
    min-width:0!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split > .od-project-player-section .od-project-block-heading{
    margin-bottom:clamp(12px,1.9vh,22px)!important;
    font-size:clamp(11px,1.18vh,13px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details{
    align-self:stretch!important;
    justify-content:space-evenly!important;
    gap:clamp(18px,2.3vh,30px)!important;
  }
  /* Allow the synopsis to use the full text half while the film artwork
     shares only the title row, avoiding a narrow paragraph column. */
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-feature{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) clamp(145px,32%,236px)!important;
    grid-template-areas:
      "eyebrow artwork"
      "title artwork"
      "synopsis synopsis"
      "note note"!important;
    gap:clamp(6px,.85vh,11px) clamp(17px,1.8vw,27px)!important;
    align-items:center!important;
    margin: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{
    display:contents!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{
    grid-area:eyebrow!important;
    align-self:end!important;
    font-size:clamp(10px,1.05vh,12px)!important;
    margin: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{
    grid-area:title!important;
    align-self:start!important;
    font-size:clamp(27px,2.35vw,40px)!important;
    line-height:1.13!important;
    margin: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 > .od-project-synopsis{
    grid-area:synopsis!important;
    font-size:clamp(13.5px,1.48vh,16px)!important;
    line-height:1.68!important;
    max-width:none!important;
    margin: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 > .od-project-note{
    grid-area:note!important;
    margin:0!important;
    font-size:clamp(12px,1.25vh,14px)!important;
    line-height:1.5!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-visual{
    grid-area:artwork!important;
    align-self:center!important;
    justify-self:end!important;
    width:100%!important;
    max-width:236px!important;
    max-height:clamp(126px,18vh,194px)!important;
    margin:0!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-visual img{
    width:100%!important;
    height:auto!important;
    max-height:clamp(126px,18vh,194px)!important;
    object-fit:contain!important;
    object-position:center right!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-credits{
    padding-top:clamp(14px,1.9vh,23px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-credits-intro{
    margin-bottom:clamp(15px,2vh,24px)!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(7px,.9vh,11px)!important;
    font-size:clamp(10px,1.05vh,11px)!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(19px,1.58vw,25px)!important;
    line-height:1.26!important;
    margin-bottom:clamp(7px,.9vh,11px)!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(13px,1.36vh,15px)!important;
    line-height:1.6!important;
    max-width:none!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-stages{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:clamp(13px,1.5vw,25px)!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(10px,1vh,12px)!important;
    line-height:1.45!important;
    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-stage p{
    font-size:clamp(12px,1.22vh,14px)!important;
    line-height:1.62!important;
  }
  /* Personal has no player; let the art and description fill the screen. */
  html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"]{
    min-height:clamp(0px,calc(100dvh - 250px),850px)!important;
    align-content:center!important;
  }
}
@media(min-width:1051px) and (max-height:760px){
  /* Preserve readable type when a desktop window is unusually short. */
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split{
    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-details{
    gap:13px!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-feature{
    gap:5px 16px!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-credits-intro{
    margin-bottom:11px!important;
  }
}

/* v324 — Films: remove duplicate artwork within each project and devote
   the freed space to a larger 16:9 player and a clean full-width text column.
   Artwork remains available only as the blurred page background. */
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-feature{
  display:block!important;
  grid-template:none!important;
  grid-template-areas:none!important;
  width:100%!important;
  min-width:0!important;
  margin: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{
  display:block!important;
  min-width:0!important;
  width:100%!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{
  display:block!important;
  margin:0 0 clamp(8px,1vh,11px)!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{
  display:block!important;
  margin:0 0 clamp(13px,1.7vh,20px)!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{
  display:block!important;
  margin:0 0 clamp(11px,1.4vh,16px)!important;
  max-width:68ch!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{
  display:block!important;
  margin:0!important;
}
@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-split{
    grid-template-columns:minmax(0,1.28fr) minmax(0,1fr)!important;
    gap:clamp(20px,2.3vw,36px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details{
    justify-content:center!important;
    gap:clamp(20px,2.7vh,34px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-player{
    width:100%!important;
    aspect-ratio:16/9!important;
  }
}
@media(min-width:1450px){
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split{
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)!important;
  }
}

/* v325 — Align Projects media with the shared Animation / Storyboard reel system.
   A single charcoal matte, no strokes or rounded ornamental frames. */
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-block-heading{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  width:100%!important;
  margin:0 0 16px!important;
  padding:12px 15px!important;
  background:#111317!important;
  color:#f7f7f7!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font:600 11px/1.3 var(--od-site-copy,'Manrope',sans-serif)!important;
  letter-spacing:.08em!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-block-heading a{
  color:#d1ff00!important;
  -webkit-text-fill-color:#d1ff00!important;
  border-bottom:0!important;
  text-decoration:none!important;
  font:inherit!important;
  letter-spacing:inherit!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-block-heading a:is(:hover,:focus-visible){
  text-decoration:underline!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-player{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  background:#09090c!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-player::before{
  content:""!important;
  position:absolute!important;
  inset:-14px!important;
  z-index:0!important;
  pointer-events:none!important;
  background:#111317!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:0 18px 54px rgba(0,0,0,.38),0 5px 15px rgba(0,0,0,.23)!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-player::after{
  content:none!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-player iframe{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
}

/* Personal: make the vertical illustration the focal point of the section.
   Expand both its grid column and its viewport-relative image height, while
   preserving the text hierarchy and the original clean, unframed artwork. */
@media(min-width:761px){
  html body #views #work[data-cat="projects"] .od-projects-showcase > .od-project-view[data-project-view="personal"]{
    display:grid!important;
    grid-template-columns:minmax(0,1.18fr) minmax(290px,.82fr)!important;
    grid-template-areas:"art info"!important;
    align-items:center!important;
    justify-items:stretch!important;
    column-gap:clamp(28px,4vw,74px)!important;
    row-gap:0!important;
    min-height:clamp(0px,calc(100dvh - 250px),860px)!important;
  }
}
html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-visual-personal{
  grid-area:art!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:stretch!important;
  align-self:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-visual-personal img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:min(68dvh,760px)!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  border:0!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-overview{
  grid-area:info!important;
  align-self:center!important;
  min-width:0!important;
  width:100%!important;
  max-width:550px!important;
}
html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-overview h3{
  font-size:clamp(32px,3.15vw,48px)!important;
  line-height:1.16!important;
  margin:0 0 clamp(19px,2.5vh,28px)!important;
}
html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-overview .od-project-synopsis{
  font-size:clamp(14px,1.12vw,16px)!important;
  line-height:1.8!important;
  max-width:48ch!important;
  margin:0 0 17px!important;
}
@media(min-width:761px) and (max-height:680px){
  html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-visual-personal img{
    height:min(62dvh,560px)!important;
  }
}
@media(max-width:760px){
  html body #views #work[data-cat="projects"] .od-projects-showcase > .od-project-view[data-project-view="personal"]{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"info" "art"!important;
    row-gap:clamp(20px,4vh,34px)!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-visual-personal{
    justify-self:center!important;
    width:100%!important;
    max-width:none!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view[data-project-view="personal"] .od-project-visual-personal img{
    width:100%!important;
    height:min(68dvh,600px)!important;
    max-height:none!important;
  }
  html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-block-heading{
    padding:11px 12px!important;
    margin-bottom:12px!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-player::before{
    inset:-8px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.32)!important;
  }
}

/* v328 — Personal: give the original artwork the dominant share of the
   available canvas. Scope every override to Personal, leaving the films and
   their blurred wallpapers untouched. */
@media(min-width:761px){
  html body #views #work[data-cat="projects"][data-projects-mode="personal"]
    .od-projects-showcase > .od-project-view[data-project-view="personal"]{
    grid-template-columns:minmax(0,1.65fr) minmax(250px,.65fr)!important;
    gap:clamp(14px,2vw,36px)!important;
    min-height:clamp(0px,calc(100dvh - 220px),930px)!important;
    align-items:center!important;
  }
}
html body #views #work[data-cat="projects"][data-projects-mode="personal"]
  .od-project-view[data-project-view="personal"] .od-project-visual-personal{
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  overflow:visible!important;
}
html body #views #work[data-cat="projects"][data-projects-mode="personal"]
  .od-project-view[data-project-view="personal"] .od-project-visual-personal img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:min(82dvh,calc(100dvh - 220px),960px)!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}
@media(max-width:760px){
  html body #views #work[data-cat="projects"][data-projects-mode="personal"]
    .od-projects-showcase > .od-project-view[data-project-view="personal"]{
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(18px,3vh,26px)!important;
  }
  html body #views #work[data-cat="projects"][data-projects-mode="personal"]
    .od-project-view[data-project-view="personal"] .od-project-visual-personal img{
    height:min(82dvh,800px)!important;
  }
}

/* v329 — Match Projects chrome and canvas to the shared work sections.
   The special Projects-only top padding was shifting the entire header
   relative to Animation and Storyboard. Keep the shared header geometry. */
html body #views #work[data-cat="projects"] > .work-section{
  padding-top:clamp(86px,10vh,116px)!important;
}
html body #views #work[data-cat="projects"] .work-topline{
  margin-bottom:clamp(14px,2vw,24px)!important;
}
html body #views #work[data-cat="projects"] > .work-section > .od-work-common-bar{
  width:95%!important;
  max-width:none!important;
  min-width:0!important;
  top:clamp(72px,5.2vw,88px)!important;
  margin:0 auto clamp(14px,2vw,23px)!important;
  padding:0!important;
  align-items:stretch!important;
  background:#09090c!important;
}
html body #views #work[data-cat="projects"] > .work-section > .od-work-common-bar > .od-projects-modes{
  display:flex!important;
  align-items:stretch!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:#09090c!important;
}
/* The reel, Storyboard and Projects share the same 1340px media canvas
   centered against the asymmetric work-section padding. */
html body #views #work[data-cat="projects"] .od-projects-showcase{
  position:relative!important;
  box-sizing:border-box!important;
  width:94%!important;
  max-width:1340px!important;
  margin:clamp(12px,1.5vw,22px) auto 0!important;
  padding:0!important;
  left:var(--od-reel-center-offset,0px)!important;
  right:auto!important;
  translate:none!important;
  transform:none!important;
}
/* Film information is one unbroken editorial block: no dividing stroke
   between description and participation or between credit columns. */
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-credits{
  padding-top:0!important;
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-stage{
  border:0!important;
  padding:0!important;
  margin:0!important;
}
/* The film label follows the same single-label format used by the other
   reels. The embedded player's own fullscreen controls remain available. */
html body #views #work[data-cat="projects"] .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-block-heading{
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
}
@media(max-width:760px){
  html body #views #work[data-cat="projects"] > .work-section > .od-work-common-bar{
    width:100%!important;
    top:calc(186px + env(safe-area-inset-top,0px))!important;
  }
  html body #views #work[data-cat="projects"] .od-projects-showcase{
    width:100%!important;
    max-width:none!important;
    margin:14px auto 70px!important;
    left:0!important;
  }
}
@media(max-width:760px) and (max-height:520px){
  html body #views #work[data-cat="projects"] > .work-section > .od-work-common-bar{
    top:calc(149px + env(safe-area-inset-top,0px))!important;
  }
}
/* v333 — Shared film editorial anchors.
   Groove Way and Devotus Anima use the same top, summary slot and credits
   positions. Previously their independent vertical centering moved every
   label, heading and credit when the amount of text changed. */
@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-split{
    align-items:start!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-split > .od-project-player-section{
    align-self:start!important;
    justify-content:flex-start!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(clamp(296px,34vh,355px),max-content) auto!important;
    align-self:start!important;
    align-content:start!important;
    justify-content:stretch!important;
    align-items:start!important;
    gap:clamp(14px,1.8vh,24px)!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-feature{
    min-height:clamp(296px,34vh,355px)!important;
    align-self:start!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{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    min-height:clamp(296px,34vh,355px)!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-top:auto!important;
  }
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-credits{
    align-self:start!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:clamp(130px,15vh,155px)!important;
    margin-bottom:clamp(10px,1.3vh,17px)!important;
  }
}
/* At tablet/mobile sizes keep the same reading sequence without fixed
   height reservations, so longer translated copy never overlaps media. */
@media(max-width:1050px){
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details{
    justify-content:flex-start!important;
    align-items:stretch!important;
  }
}

/* v336 — Consistent dark reading panels for Projects.
   Groove Way and Devotus Anima keep their shared content anchor positions;
   Personal gets the same treatment without framing the artwork. */
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details,
html body #views #work[data-cat="projects"]
  .od-project-view[data-project-view="personal"] .od-project-overview{
  box-sizing:border-box!important;
  background:#09090c!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:0 12px 34px rgba(0,0,0,.22)!important;
  padding:clamp(18px,2.2vw,28px)!important;
}
html body #views #work[data-cat="projects"]
  .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details{
  min-width:0!important;
  width:100%!important;
}
html body #views #work[data-cat="projects"]
  .od-project-view[data-project-view="personal"] .od-project-overview{
  max-width:550px!important;
}
@media(max-width:760px){
  html body #views #work[data-cat="projects"]
    .od-project-view:is([data-project-view="groove"],[data-project-view="devotus"]) .od-project-details,
  html body #views #work[data-cat="projects"]
    .od-project-view[data-project-view="personal"] .od-project-overview{
    padding:clamp(16px,4vw,22px)!important;
  }
}