:root{
  --nm-preview-image-max: 540px;
  --nm-property-image-max: 500px;
  --nm-reading-hero-max: 1120px;
}

/* HOME / COURTYARD STORY PREVIEWS
   Artwork has presence. Text and image begin on the same visual line. */
#axiom .split,
#kabir-preview .split,
#csja .split,
#conversation .split{
  align-items:start !important;
  grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr) !important;
  gap:clamp(2rem,4.5vw,4rem) !important;
}
#axiom .visual,
#kabir-preview .visual,
#csja .visual,
#conversation .visual{
  min-height:0 !important;
  height:auto !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
  align-self:start !important;
  justify-self:start !important;
  width:min(100%,var(--nm-preview-image-max)) !important;
}
#axiom .visual img,
#kabir-preview .visual img,
#csja .visual img,
#conversation .visual img{
  width:100% !important;
  height:auto !important;
  max-height:640px !important;
  object-fit:contain !important;
  object-position:top center !important;
  background:transparent !important;
  display:block !important;
  box-shadow:0 14px 34px rgba(44,37,25,.14) !important;
}

/* PROPERTY THRESHOLDS
   Stable frame: replacement artwork drops into the same architectural position. */
.hero-poster{
  align-items:start !important;
  gap:clamp(2rem,5vw,4.25rem) !important;
}
.hero-poster > img{
  width:min(100%,var(--nm-property-image-max)) !important;
  height:auto !important;
  max-height:660px !important;
  object-fit:contain !important;
  object-position:top center !important;
  justify-self:center !important;
  align-self:start !important;
  background:transparent !important;
}

/* CSJA was still inheriting old thumbnail rules. Override them completely. */
.csja-room-hero{
  grid-template-columns:minmax(360px,500px) minmax(0,1fr) !important;
  align-items:start !important;
}
.csja-room-hero img{
  max-width:500px !important;
  width:100% !important;
  height:auto !important;
  order:initial !important;
}

/* READING ROOM HEROES
   Permanent 16:9 architectural frame, source standard 1920x1080. */
.room-hero-frame{
  width:min(100%,var(--nm-reading-hero-max)) !important;
  aspect-ratio:16/9 !important;
  margin:1.5rem auto 2rem !important;
  overflow:hidden !important;
  background:transparent !important;
}
.room-hero-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

/* Mobile retains the image's importance without turning it into a thumbnail. */
@media(max-width:820px){
  #axiom .split,
  #kabir-preview .split,
  #csja .split,
  #conversation .split{
    grid-template-columns:1fr !important;
    gap:1.6rem !important;
  }
  #axiom .visual,
  #kabir-preview .visual,
  #csja .visual,
  #conversation .visual{
    width:100% !important;
    max-width:620px !important;
    justify-self:center !important;
  }
  #axiom .visual img,
  #kabir-preview .visual img,
  #csja .visual img,
  #conversation .visual img{
    max-height:none !important;
  }
  .hero-poster{
    grid-template-columns:1fr !important;
  }
  .hero-poster > img{
    width:min(100%,520px) !important;
    max-height:none !important;
  }
  .csja-room-hero{
    grid-template-columns:1fr !important;
  }
  .csja-room-hero img{
    max-width:520px !important;
    order:initial !important;
  }
  .room-hero-frame{
    width:100% !important;
    margin:1.15rem auto 1.6rem !important;
  }
}