/* Projects | Three focused subpages in the existing work submenu.
   Exclude the old generic demo-card grid only for the Projects route. */
html body #views #work[data-cat] .od-work-common-bar > .od-projects-modes {
  display:none!important;
}
html body #views #work[data-cat="projects"] .od-work-common-bar > .od-work-bar-tab {
  display:none!important;
}
html body #views #work[data-cat="projects"] .od-work-common-bar > .od-projects-modes {
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:#09090c!important;
}
html body #views #work[data-cat="projects"] .od-projects-mode {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-height:34px!important;
  padding:8px clamp(11px,1.4vw,23px)!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#101014!important;
  box-shadow:none!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;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:background .15s ease!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;
}
html body #views #work[data-cat="projects"] .od-projects-mode:hover:not(.is-active) {
  background:#23232b!important;
}
html body #views #work[data-cat="projects"] .od-projects-mode:focus-visible {
  outline:2px solid #d1ff00!important;
  outline-offset:-2px!important;
}
html body #views #work[data-cat="projects"] > .work-section > #projectGrid {
  display:none!important;
}
html body #views #work .od-projects-showcase {
  display:none!important;
}
html body #views #work[data-cat="projects"] .od-projects-showcase {
  display:block!important;
  position:relative!important;
  z-index:5!important;
  box-sizing:border-box!important;
  width:94%!important;
  max-width:1320px!important;
  min-width:0!important;
  margin:clamp(12px,1.5vw,22px) auto 90px!important;
  padding:0!important;
  color:#f4f4f5!important;
  left:var(--od-reel-center-offset,0px)!important;
}
html body #views #work .od-projects-showcase .od-project-view {
  display:none!important;
  width:100%!important;
  min-width:0!important;
}
html body #views #work[data-cat="projects"][data-projects-mode="groove"] .od-project-view[data-project-view="groove"],
html body #views #work[data-cat="projects"][data-projects-mode="devotus"] .od-project-view[data-project-view="devotus"],
html body #views #work[data-cat="projects"][data-projects-mode="personal"] .od-project-view[data-project-view="personal"] {
  display:block!important;
}
html body #views #work .od-project-feature {
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr)!important;
  gap:clamp(22px,3.3vw,54px)!important;
  align-items:center!important;
  margin:0 0 clamp(30px,4.2vw,65px)!important;
  min-width:0!important;
}
html body #views #work .od-project-visual {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#101115!important;
}
html body #views #work .od-project-visual img {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  filter:none!important;
}
html body #views #work .od-project-visual-groove img {aspect-ratio:1280/684}
html body #views #work .od-project-visual-devotus img {max-height:600px!important}
html body #views #work .od-project-feature-personal {
  grid-template-columns:minmax(0,.76fr) minmax(300px,1fr)!important;
  align-items:center!important;
}
html body #views #work .od-project-visual-personal {
  max-width:480px!important;
  width:100%!important;
  background:transparent!important;
}
html body #views #work .od-project-visual-personal img {
  max-height:740px!important;
  width:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
}
html body #views #work .od-project-overview {min-width:0!important}
html body #views #work .od-project-eyebrow {
  display:block!important;
  color:#d1ff00!important;
  font:600 11px/1.4 'IBM Plex Mono',monospace!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  margin:0 0 15px!important;
}
html body #views #work .od-project-overview h3 {
  margin:0 0 clamp(16px,2vw,28px)!important;
  color:#f4f4f5!important;
  -webkit-text-fill-color:#f4f4f5!important;
  font:750 clamp(27px,3vw,48px)/1.12 var(--od-site-copy,'Manrope',sans-serif)!important;
  letter-spacing:-.035em!important;
  overflow-wrap:break-word!important;
  text-transform:none!important;
}
html body #views #work .od-project-synopsis {
  margin:0 0 19px!important;
  color:#c5c8cf!important;
  font:400 clamp(14px,1.12vw,16px)/1.85 var(--od-site-copy,'Manrope',sans-serif)!important;
  letter-spacing:0!important;
  max-width:63ch!important;
}
html body #views #work .od-project-note {
  margin:24px 0 0!important;
  color:#e2e4e8!important;
  font:500 12px/1.65 'IBM Plex Mono',monospace!important;
}
html body #views #work .od-project-player-section {
  width:100%!important;
  margin:0 0 clamp(42px,5vw,82px)!important;
  padding:0!important;
}
html body #views #work .od-project-block-heading {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  flex-wrap:wrap!important;
  margin:0 0 15px!important;
  font:600 11px/1.5 'IBM Plex Mono',monospace!important;
  letter-spacing:.075em!important;
}
html body #views #work .od-project-block-heading a {
  color:#d1ff00!important;
  text-decoration:none!important;
  border-bottom:1px solid currentColor!important;
}
html body #views #work .od-project-player {
  position:relative!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  background:#09090c!important;
  overflow:hidden!important;
}
html body #views #work .od-project-player iframe {
  position:absolute!important;
  inset:0!important;
  border:0!important;
  width:100%!important;
  height:100%!important;
}
html body #views #work .od-project-credits {
  display:grid!important;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
  gap:clamp(28px,4.2vw,70px)!important;
  align-items:start!important;
  padding:clamp(23px,3vw,48px) 0 0!important;
  margin:0!important;
  border-top:1px solid rgba(255,255,255,.19)!important;
}
html body #views #work .od-project-credits-intro h4 {
  margin:0 0 15px!important;
  font:700 clamp(21px,2.1vw,32px)/1.22 var(--od-site-copy,'Manrope',sans-serif)!important;
  color:#f4f4f5!important;
  letter-spacing:-.025em!important;
}
html body #views #work .od-project-credits-intro p {
  margin:0!important;
  max-width:42ch!important;
  font:400 14px/1.8 var(--od-site-copy,'Manrope',sans-serif)!important;
  color:#c5c8cf!important;
}
html body #views #work .od-project-stages {
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}
html body #views #work .od-project-stage {
  padding:0 0 21px!important;
  margin:0 0 20px!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}
html body #views #work .od-project-stage:last-child {border-bottom:0!important}
html body #views #work .od-project-stage h5 {
  margin:0 0 8px!important;
  font:600 11px/1.4 'IBM Plex Mono',monospace!important;
  color:#d1ff00!important;
  letter-spacing:.085em!important;
}
html body #views #work .od-project-stage p {
  margin:0!important;
  color:#dddfe4!important;
  font:400 14px/1.7 var(--od-site-copy,'Manrope',sans-serif)!important;
}
@media(max-width:950px) {
  html body #views #work .od-project-feature,
  html body #views #work .od-project-feature-personal {
    grid-template-columns:minmax(0,1fr)!important;
    gap:26px!important;
    align-items:start!important;
  }
  html body #views #work .od-project-credits {
    grid-template-columns:minmax(0,1fr)!important;
  }
  html body #views #work .od-project-visual-personal {max-width:min(100%,480px)!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-projects-mode {
    padding:8px 11px!important;
    font-size:10px!important;
    letter-spacing:.01em!important;
  }
  html body #views #work .od-project-overview h3 {
    font-size:clamp(27px,6vw,36px)!important;
  }
  html body #views #work .od-project-visual-personal {max-width:360px!important}
}
@media(prefers-reduced-motion:reduce){
  html body #views #work[data-cat="projects"] .od-projects-mode {transition:none!important}
}